JS实现文字列表的无缝滚动效果代码分享
导读:
本文介绍了JS文字列表无缝滚动的具体代码,供大家参考,具体内容如下:
HTML代码:
<div id="rule">
<div class="list" id="list">
<p>用户1 获得XXX优惠券</p>
<p>用户2 获得XXX优惠券</p>
<p>用户3 获得XXX优惠券</p>
<p>用户4 获得XXX优惠券</p>
<p>用户5 获得XXX优惠券</p>
<p>用户6 获得XXX优惠券</p>
<p>用户7 获得XXX优惠券</p>
<p>用户8 获得XXX优惠券</p>
<p>用户9 获得XXX优惠券</p>
<p>用户10 获得XXX优惠券</p>
</div>
<div class="list2" id="list2"></div>
</div>
JS代码:
var speed=50;
var list=document.getElementById('list');
var list2=document.getElementById('list2');
var rule=document.getElementById('rule');
list2.innerHTML=list.innerHTML;
function Marquee(){
if(list2.offsetTop-rule.scrollTop<=0)
rule.scrollTop-=list.offsetHeight;
else{
rule.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
rule.onmouseover=function() {clearInterval(MyMar)}
rule.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
相关推荐
jquery插件Marquee.js实现无缝滚动效果代码分享
本文介绍胃jquery插件Marquee.js实现无缝滚动效果代码。Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果,配制代码如下:{ yScroll: "top" //…
2022-05-22 21:40:09 | 分类:默认 | 作者:myerob | 阅读:152 | 标签:jquery 插件 Marquee.js 实现 无缝 滚动 效果 | 收藏
jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明
nicescroll是一款基于jQuery的滚动条插件,使用简单,功能强大,较mCustomScrollbar而言:资源文件少,只要一个jquery.nicescroll.min.js即可,无须css…
2022-12-05 22:16:17 | 分类:JS | 作者:myerob | 阅读:210 | 标签:jQuery nicescroll | 收藏
滚动条插件 NiceScroll 使用详解
有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各…
2022-12-05 22:23:19 | 分类:JS | 作者:myerob | 阅读:365 | 标签:滚动条插件 NiceScroll 使用详解 | 收藏
mCustomScrollbar 滚动条使用详解
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A…
2022-12-05 22:29:52 | 分类:JS | 作者:myerob | 阅读:160 | 标签:mCustomScrollbar 滚动条使用详解 | 收藏
- 阅读榜
- 1. 离职员工申报个税删不掉 显示存在收入明细,若该人员已离职或退休,请将人员状态改为非正常。可改为非正常后还是不行
- 2. Win10删除驱动?无需担心,快速有效的方法在这里!
- 3. 个人所得税申报系统(扣缴端)如何删除已离职人员信息
- 4. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 5. mounRiver/eclipse报错“Symbol could not be resolved”,但是编译没有问题
- 6. NTC热敏电阻B值3950(温度系数对照表)
- 7. 单片机测量NTC热敏电阻温度,函数计算方式。
- 8. GB2312汉字编码字符集对照表
- 9. h3c交换机乱码怎么弄(h3c 配置备份报错)如何修改交换机字符集?
- 10. ASCII码一览表,ASCII码对照表