js实现文字列表无缝滚动效果
2017-06-23 16:02
881 查看
<div id="rule"> <div class="list" id="list"> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> </div> <div class="list2" id="list2"></div> </div>
JavaScript代码
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)}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- JS实现Li列表的无缝垂直文字滚动代码
- js 实现文字列表滚动效果
- js实现的单行文本不间断无缝滚动效果(荧光屏文字 滚动效果)
- js实现文字列表无缝向上滚动
- JS实现倒计时和文字滚动的效果实例
- JQuery实现文字无缝滚动效果(Marquee插件)
- Js 实现文字爬楼滚动效果 结合文本框
- JS实现图片滚动(无缝、平滑、上下左右滚动)效果
- 走马灯效果代码js appendChild实现的无缝滚动
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- js实现简单易用的上下无缝滚动效果
- jquery xMarquee实现文字水平无缝滚动效果
- marquee+js实现某个区域的“无缝滚动效果”
- 一个js实现任务栏文字滚动效果
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- 走马灯效果代码js appendChild实现的无缝滚动
- JavaScript实现文字列表无缝向上滚动
- js实现文字定时上下滚动效果
- js-实现文字无缝滚动(停顿+缓动)
- JS实现倒计时和文字滚动的效果实例