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; ...
随机推荐
- Exception in thread "main" java.lang.NullPointerException at Class.main
出现这种问题,可能的原因之一可能是对象数组未初始化. Class[] class = new Class[N]; for(int i = 0; i < N; i++){ class[i] = n ...
- 关于centos7无法上网的问题
应该是本机电脑禁用了VMware Nat Service,右击计算机管理点击--服务-- 然后就可以上网了
- C# TCP与UDP
Http使用端口是80 SMTP使用端口是25 TCP是首选协议,它提供有保证的传输.错误校正和缓冲. System.Net.Sockets. TcpClient类封装了TCP链接,提供属性字段来控制 ...
- spring cloud_1_mm_ribbon
ji接上文 ribbon做请求分发负载均衡 ribbon 配置: server.port=9999 spring.application.name=ribbon-consumer #stores.ri ...
- storm入门基础实例（无可靠性保证实例）
本实例为入门篇无可靠性保证实例,关于storm的介绍,以及一些术语名词等,可以参考Storm介绍(一).Storm介绍(二). 本案例是基于storm0.9.3版本 1.案例结构 案例:Word Co ...
- window10单机安装storm集群
适合范围:storm自由开源的分布式实时计算系统,擅长处理海量数据.适合处理实时数据而不是批处理. 安装前的准备 1.安装zookeeper ①下载zookeeperhttps://zookeeper ...
- flask 数据库迁移的简单操作
1.目的:修改现有数据库的表结构,不改变数据库中现有的数据. 2.导包:from flask_migrate import Migrate, MigrateCommandfrom flask_scri ...
- Web应用程序的安全问题
常规的安全问题主要分为以下几大类 一,跨站脚本攻击(XSS) 指的是攻击者向web页面注入恶意的Javascript代码,然后提交给服务器,但是服务器并没有做校验和转义等处理,随即服务器的响应页就被植 ...
- 我的代码- rf sampling
# coding: utf-8 # In[6]: import pandas as pdimport numpy as npfrom sklearn import treefrom sklearn.s ...
- nginx日志分割
mark 参考文章: https://blog.csdn.net/molaifeng/article/details/82667158