时间:2021-05-26
本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下
HTML代码:
<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)}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
js替代marquee实现图片无缝滚动可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面
div+css+javascript实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox用marquee实现首尾相连循环滚动效果(仅IE):复制代
我们会看到很多的网站上会使用多张图片无缝滚动的效果。下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动。1.
本文实例为大家分享了js无缝滚动效果实现代码,供大家参考,具体内容如下无缝滚动#warp{width:1200px;height:300px;overflow:
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果。代码实例如下:文字列表无缝向上滚动代码*{margin:0