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 | 阅读:265 | 标签:jquery 插件 Marquee.js 实现 无缝 滚动 效果 | 收藏
PHP json_decode()报错 json_last_error()判断错误类型及解决方法
PHP json_decode()报错 json_last_error()判断错误类型 解决背景:最近在用curl请求接口获取json数据串的时候,一直出现PHP中json_decode()解析字符串…
2022-10-29 21:45:57 | 分类:PHP | 作者:myerob | 阅读:715 | 标签:PHP json_decode() 报错 json_last_error() 判断错误类型 解决方法 | 收藏
jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明
nicescroll是一款基于jQuery的滚动条插件,使用简单,功能强大,较mCustomScrollbar而言:资源文件少,只要一个jquery.nicescroll.min.js即可,无须css…
2022-12-05 22:16:17 | 分类:JS | 作者:myerob | 阅读:284 | 标签:jQuery nicescroll | 收藏
mCustomScrollbar 滚动条使用详解
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A…
2022-12-05 22:29:52 | 分类:JS | 作者:myerob | 阅读:199 | 标签:mCustomScrollbar 滚动条使用详解 | 收藏
- 阅读榜
- 1. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 2. GB2312汉字编码字符集对照表
- 3. 主席令13届第89号《中华人民共和国印花税法》
- 4. 概率统计学中95%置信区间的系数1.96怎么得到的?
- 5. 个人所得税申报系统(扣缴端)如何删除已离职人员信息
- 6. BCD码的定义以及其与十进制数据转换方法(附验证工具)
- 7. 什么情况下免征教育附加税,地方教育附加税?两附加费优惠政策
- 8. 离职员工申报个税删不掉 显示存在收入明细,若该人员已离职或退休,请将人员状态改为非正常。可改为非正常后还是不行
- 9. cdr怎么画环形阵列,cdr阵列复制快捷键
- 10. 快速开发CSS的利器——less的基本用法