js无间隙向上滚动
一、优点：div可以load；缺点：滚动的时候有点娘，磨磨唧唧，不够干脆爽快
html
<div id="my_msg" class="my-msg bg-white clearfix none" style="display: block;">
<div class="icon"><i class="envelope"></i><p>我的消息</p><i class="red-dot"></i></div>
<div class="msg" id="myMsgContent">
<ul>
<li>
<a href="javascript:setRead(0,'http://person.tgxrc.com:88/apply/list')">
【投递反馈】您投递的“.net软件开发工程师55”等6个职位企业已查看简历。
</a>
</li><li>
<a href="javascript:setRead(5,'http://person.tgxrc.com:88/message/list')">
【人事来信】中国广西人才市场/广西人才网给你发送了一封人事来信，点击查看
</a>
</li><li>
<a href="javascript:setRead(6,'http://person.tgxrc.com:88/resume/list')">
您的竞争力较低，完善简历可以提升竞争力，赶快去完善简历吧！
</a>
</li></ul>
</div>
</div>
css
.my-msg{height:46px;color:#999;padding:10px;}
.my-msg .icon{float:left;width:50px;border-right:1px solid #dcdcdc;text-align:left;margin-right:10px;position:relative;}
.my-msg a,.my-msg i{display:block;}
.my-msg i.envelope{float:left;width:40px;height:28px;background:#fff url(/Content/Images/2018/message.png) no-repeat;background-size:100%;}
.my-msg .icon p{float:left;font-size:12px;color:#666;transform: scale(0.8);margin-left:-4px;}
.my-msg i.red-dot{width:10px;height:10px;background:#f33;border-radius:100%; position:absolute;top:-2px;right:8px;}
.my-msg .msg{height:46px;overflow: hidden;}
.my-msg .msg li a{display:block;height:40px;line-height:20px;margin:5px; font-size:14px;color:#666;overflow:hidden;}
js
//数据向上滚动
function scrollNews(obj) {
var $self = obj.find('ul:first');
var lineHeight = $self.find('li:first').height();
$self.animate({
'marginTop': -lineHeight + 'px'
}, 500, function () {
$self.css({ marginTop: 0 }).find('li:first').appendTo($self);
});
}
function afterScrollNews(obj) {
var timeout = 3000;
var scrollTimer = setInterval(function () {
scrollNews(obj);
}, timeout);
obj.hover(function () {
clearInterval(scrollTimer);
}, function () {
scrollTimer = setInterval(function () {
scrollNews(obj);
}, timeout);
});
}
var $obj = $('#myMsgContent');
afterScrollNews($obj);
二、不是很好用，代码繁琐，缺点：div内容是load的话，无效；优点：滚动的时候比较干脆爽快
html
<div class="contentWidth" id="RecruitmentArea">
<div id="ImportantRecruitment" class="RecruitmentInfo"> <div class="RecruitmentIcon">
<nav> <a href="/HomePosition/resultCity?schType=1&IsEmer=true&pageSize=10&page=1" class="menuJp" title="急聘">
<i class="icon-clock"></i>
<p>急聘</p>
</a>
</nav>
</div>
<div class="RecruitmentDe" id="ImportantRecruitmentPosition">
<ul class="Triangle" style="margin-top: -325px;"> <li>
<a href="/home/jobDetail?pid=3142012">
<p class="PositionName">蔚来顾问（Fellow)--高薪</p>
<p class="Enterprise">上海蔚来汽车有限公司</p>
<p class="Enterprise"><span>大专</span><span class="vl">|</span><span>南宁市/青秀区</span><span class="vl">|</span><span>8001-10000</span></p>
</a>
</li><li>
<a href="/home/jobDetail?pid=2611237">
<p class="PositionName">技术支持/维护</p>
<p class="Enterprise">广西乐美趣智能科技有限公司</p>
<p class="Enterprise"><span></span><span class="vl"></span><span>南宁市/西乡塘区</span><span class="vl">|</span><span>4001-5000</span></p>
</a>
</li><li>
<a href="/home/jobDetail?pid=2604036">
<p class="PositionName">销售行政助理（周末双休）</p>
<p class="Enterprise">南宁中天房地产有限责任公司</p>
<p class="Enterprise"><span>大专</span><span class="vl">|</span><span>南宁市</span><span class="vl">|</span><span>3001-4000</span></p>
</a>
</li><li>
<a href="/home/jobDetail?pid=3142277">
<p class="PositionName">寒假工(餐饮服务员）</p>
<p class="Enterprise">广西好友缘餐饮投资有限公司</p>
<p class="Enterprise"><span>大专</span><span class="vl">|</span><span>南宁市</span><span class="vl">|</span><span>2001-3000</span></p>
</a>
</li></ul>
</div>
</div>
<div id="Graduate" class="RecruitmentInfo">
<div class="RecruitmentIcon">
<nav>
<a href="/home/bys?did=2" class="menuBys" title="毕业生">
<i class="icon-doctorialHat"></i>
<p>毕业生</p>
</a>
</nav>
</div><div class=" RecruitmentDe" id="GraduateRecruitmentPosition">
<ul class="Triangle" style="margin-top: -650px;"> <li>
<a href="/home/jobDetail?pid=3155622">
<p class="PositionName">工程测量</p>
<p class="Enterprise">广西高立工程技术有限公司</p>
<p class="Enterprise"><span>大专</span><span class="vl">|</span><span>广西壮族自治区</span><span class="vl">|</span><span>3001-4000</span></p>
</a>
</li><li>
<a href="/home/jobDetail?pid=3155354">
<p class="PositionName">道路设计实习生</p>
<p class="Enterprise">广西高立工程技术有限公司</p>
<p class="Enterprise"><span>大专</span><span class="vl">|</span><span>广西壮族自治区</span><span class="vl">|</span><span>1001-1500</span></p>
</a>
</li><li>
<a href="/home/jobDetail?pid=3155168">
<p class="PositionName">财务实习生</p>
<p class="Enterprise">永诚财产保险股份有限公司广西分公司</p>
<p class="Enterprise"><span>本科</span><span class="vl">|</span><span>广西壮族自治区</span><span class="vl">|</span><span>1001-1500</span></p>
</a>
</li><li>
<a href="/home/jobDetail?pid=3155622">
<p class="PositionName">工程测量</p>
<p class="Enterprise">广西高立工程技术有限公司</p>
<p class="Enterprise"><span>大专</span><span class="vl">|</span><span>广西壮族自治区</span><span class="vl">|</span><span>3001-4000</span></p>
</a>
</li><li>
<a href="/home/jobDetail?pid=3155354">
<p class="PositionName">道路设计实习生</p>
<p class="Enterprise">广西高立工程技术有限公司</p>
<p class="Enterprise"><span>大专</span><span class="vl">|</span><span>广西壮族自治区</span><span class="vl">|</span><span>1001-1500</span></p>
</a>
</li></ul>
</div>
</div>
</div>
css
#RecruitmentArea { padding: 10px 0; }
#RecruitmentArea .RecruitmentInfo { height: 65px; background-color: #fff; padding: 0 0 0 90px; overflow: hidden; position: relative; }
#RecruitmentArea .RecruitmentIcon { position: absolute; top:; left:; }
#RecruitmentArea .RecruitmentIcon a { width: 80px; height: 80px; }
.menuJp { background: #ff6666; }
.menuBys { background: #99cc99; }
.menuJp i { width: 49px; height:28px; margin: 10px auto 0; font-size: 26px; }
.menuBys i { width: 49px; height:30px; margin: 3px auto 3px; font-size: 36px; }
#ImportantRecruitmentPosition, #GraduateRecruitmentPosition { height: 65px; overflow: hidden; }
#RecruitmentArea ul li { position: relative; height: 65px; }
#RecruitmentArea ul li a { display:block; padding-right:20px;}
#RecruitmentArea p {}
#RecruitmentArea .PositionName { height: 24px; color: #009FE7; font-size: 16px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; }
#RecruitmentArea .Enterprise { height:19px; color: #666666; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#Graduate { margin-top: 10px; clear: both; }
.RecruitmentDe { }
js
(function () {function mix(t, s, ov, wl) {
if (!s || !t)
return t;
if (ov === undefined)
ov = true;
var i, p, l;
if (wl && (l = wl.length)) {
for (i = 0; i < l; i++) {
p = wl[i];
if (p in s) {
if (ov || !(p in t)) {
t[p] = s[p];
}
}
}
}
else {
for (p in s) {
if (ov || !(p in t)) {
t[p] = s[p];
}
}
}
return t;
};
function augment(t, s, ov, wl) {
mix(t.prototype, s.prototype || s, ov, wl);
return t;
}
var direction = function () { }
direction.prototype = {
startTimer: function (fn) {
var self = this;
if (self.options.timeout) {
self.timer = setInterval(function () {
fn && fn.call(self);
self.play();
}, self.options.timeout);
}
},
stopTimer: function () {
var self = this;
self.timer && clearInterval(self.timer);
},
isDir: function () {
var self = this;
return self.options.dir == 1 || self.options.dir == 4;
},
getDir: function (b) {
var self = this;
return self.options.dir == 1 || self.options.dir == 3;
},
getDimName: function () {
var self = this;
return self.getDir() ? "height" : "width";
},
getDirName: function () {
var self = this;
return self.getDir() ? "margin-top" : "margin-left";
},
getElemSize: function () {
var self = this;
return self.getDir() ? self.options.outHeight : self.options.outWidth;
},
getContainerSize: function () {
var self = this;
return self.getDir() ? self.options.height : self.options.width;
},
//获取滚动的算法信息
getSizeInfo: function () {
var self = this,
totalPageSize = self.maxIndex * self.getElemSize(),
totalPageLen = Math.floor(totalPageSize / self.getContainerSize()),
viewPageLen = Math.floor(self.getContainerSize() / self.getElemSize()),
residuePageLen = self.maxIndex - viewPageLen,
endLen = residuePageLen % self.options.step,
pageIndex = self.index * self.options.step,
endPos = totalPageSize - self.getContainerSize(),
stepPos = self.isDir() ? pageIndex - self.options.step : pageIndex + self.options.step,
scrollPos = stepPos * self.getElemSize(),
viewSize = self.getElemSize() * self.options.step,
resultLen = self.maxIndex - endLen == self.maxIndex ? 0 : Math.abs(self.maxIndex - ((self.maxIndex - endLen) + self.options.step)),
resultSize = resultLen * self.getElemSize(),
maxIndex = Math.ceil((self.maxIndex - viewPageLen) / self.options.step);
return {
totalPageSize: totalPageSize,
endPos: endPos,
pageIndex: pageIndex,
scrollPos: scrollPos,
viewSize: viewSize,
viewPageLen: viewPageLen,
totalPageLen: totalPageLen,
resultSize: resultSize,
maxIndex: maxIndex
}
}
}
var slider = function (o) {
this.options = o || {};
this.init();
}
mix(slider.prototype, {
init: function () {
var self = this;
self.options.target = self.options.target || '#banner_scroller';
self.options.item = self.options.item || 'li';
self.options.prev = self.options.prev || null;
self.options.next = self.options.next || null;
self.options.time = self.options.time != null ? self.options.time : 500;
self.options.timeout = self.options.timeout != null ? self.options.timeout : 5000;
self.options.dir = self.options.dir || 4;
self.options.autoPlay = self.options.autoPlay || "auto";
self.target = $(self.options.target);
self.item = self.target.find(self.options.item);
self.list = self.item.parent();
self.options.step = self.options.step || 1;
self.options.width = self.target.outerWidth();
self.options.height = self.target.outerHeight();
self.options.outWidth = self.item.outerWidth(true);
self.options.outHeight = self.item.outerHeight(true);
self.options.tempDir = self.options.dir;
self.maxIndex = self.item.length;
self.enabled = true;
self.steup();
},
steup: function () {
var self = this,
size = self.getSizeInfo().viewPageLen;
if (self.options.step > size)
self.options.step = size;
if (self.maxIndex <= size) {
self.options.prev && self.target.find(self.options.prev).hide();
self.options.next && self.target.find(self.options.next).hide();
return;
}
self.bind();
},
bind: function () {
var self = this;
self.initList();
self.target.hover(function () {
self.stopTimer();
}, function () {
self.autoPlay();
});
self.options.prev && self.target.find(self.options.prev).click(function () {
if (self.enabled) {
self.options.dir = self.getDir() ? 3 : 2;
self.play();
}
});
self.options.next && self.target.find(self.options.next).click(function () {
if (self.enabled) {
self.options.dir = self.getDir() ? 1 : 4;
self.play();
}
});
self.autoPlay();
},
initList: function () {
var self = this,
avaisize = self.maxIndex - self.getSizeInfo().viewPageLen,
total = self.maxIndex * self.getElemSize(),
html = self.list.html();
if (avaisize < self.options.step) {
self.list.append(html);
}
self.list.prepend(html);
self.pos = -total;
self.list.css(self.getDirName(), self.pos);
},
addElement: function () {
var self = this;
self.item = self.target.find(self.options.item);
self.maxIndex = self.item.length;
self.item.each(function (i) {
if (i >= self.options.step) return;
if (self.isDir()) {
self.item.eq(i).appendTo(self.list);
} else {
self.item.eq(self.maxIndex - i - 1).prependTo(self.list);
}
});
self.list.css(self.getDirName(), self.pos);
},
play: function () {
var self = this;
self.enabled = false;
self.go();
self.stopTimer();
},
autoPlay: function () {
var self = this;
if (self.options.autoPlay === "auto") {
self.stopTimer();
self.startTimer();
}
},
go: function () {
var self = this;
self.list.stop(true, false).animate(self.getPos(), self.options.time, function () {
self.addElement();
self.enabled = true;
self.options.dir = self.options.tempDir;
self.autoPlay();
});
},
dir: function () {
var self = this;
return (self.options.dir == 4 || self.options.dir == 3) ? "Next" : "Prev";
},
getPos: function () {
var self = this,
size = self.getElemSize() * self.options.step;
switch (self.options.dir) {
case 1:
return { "margin-top": (self.pos - size) };
break;
case 2:
return { "margin-left": (self.pos + size) };
break;
case 3:
return { "margin-top": (self.pos + size) };
break;
case 4:
return { "margin-left": (self.pos - size) };
break;
}
}
});
augment(slider, direction);
sr = new slider({
target: "#ImportantRecruitmentPosition",
dir: 1,
timeout: 3000
});
sr2 = new slider({
target: "#GraduateRecruitmentPosition",
dir: 1,
timeout: 3000
});
})();
js无间隙向上滚动的更多相关文章
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- js判断鼠标向上滚动并浮动导航
<div id="Jnav"> <ul class="nav"> <li><a href="#"& ...
- js无间隙滚动
代码一: ; //设置文字滚动速度 dome2.innerHTML=dome1.innerHTML //复制dome1为dome2 function Marquee(){ ) //当滚动至dome1与 ...
- JS不间断向上滚动 setInterval和clearInterval
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><d ...
- js单条新闻向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- JS实现上下左右四方向无间隙滚动
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出< marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路: ...
- js实现图片向上播放（轮番滚动）
js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
随机推荐
- jupyter 中markdown使用
jupyter使用还是很方便的,尤其是喜欢MarkDown功能,在安装插件后可以非常清晰的看到整个文档的基本结构,下面介绍下MarkDownd的使用: 1.MarkDown必须是在命令模式是下使用的, ...
- 1--HTTP基础知识
1. HTTP工作流程 客户端与服务器要建立连接(TCP) 客户端向服务端发起HTTP请求 服务器做出应答,表示对客户端请求的应答 客户端接受服务器所返回的信息 2. HTTP之URL 协议部分:HT ...
- http error: "request body stream exhausted"
'request body stream exhausted' after authentication challenge #661 Closed aburgel opened this issu ...
- django用MySQL数据库链接
在使用的过程中出现了没有mysqld.sock这个文件的情况,无法连接到mysql数据库. 几经周折,设置路径,改文件夹的权限,也都无济于事,只有重新安装mysql服务器,第一次尝试还是失败,服务器安 ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- Winscp无法连接linux虚拟机解决
之前需要从主机传文件到虚拟机上,安装了vmware tools,拖拽文件后发现文件总是会损坏一些,查了一下,使用Winscp就不会出现这个问题. 安装好后配置连接:(Centos7) 打开虚拟机,找到 ...
- 【Linux】comm指令
语法 comm [-123][--help][--version][第1个文件][第2个文件] 参数 -1 不显示只在第1个文件里出现过的列 -2 不显示只在第2个文件里出现过的列 -3 不显示只在第 ...
- Java基于opencv—归一化
Opencv中提供了resize函数,可以把图像调整到相同大小 Java中resize函数的声明,内部调用的都是native方法 public static void resize(Mat src, ...
- 播放器: AVPlayer
AVPlayer *player = [AVPlayer playerWithURL:[NSURL URLWithString:@"http://flv2.bn.netease.com/vi ...
- Centos6.5下使用LAMP搭建discuz论坛（编译安装 PS ：自学中 写的不好请见谅）
wget http://mirror.bit.edu.cn/apache/httpd/httpd-2.2.27.tar.gz 下载Apache软件包 wget http://downloads.my ...