js实现文字列表无缝滚动效果
更新时间：2017年06月23日 16:02:33 作者：小太阳zxr
这篇文章主要为大家详细介绍了js实现文字列表无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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)}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Omar AL Zabir这位MVP总是喜欢搞些稀奇古怪同时又很实用的小东西，并且还十分值得参考。最近他就做了一个叫做ensure的小工具用于动态加载JavaScript、CSS与HTML，而且IE、Firefox、Opera、Safari都支持了，那么我们就来看看ensure是如何做到动态加载JavaScript与CSS的。2008-09-09
javascript中typeof操作符和constucor属性检测
这篇文章主要介绍了javascript中typeof操作符和constucor属性检测的相关资料,需要的朋友可以参考下2015-02-02
由于浏览器的安全限制,Javascript无法直接获取用户上传文件的绝对路径。但是我们可以通过一些技巧来获取文件的相对路径,这篇文章主要给大家介绍了关于js获得相对路径文件并上传到服务器的相关资料,需要的朋友可以参考下2023-11-11
本文主要介绍了JS PromiseLike的判定与使用详解, 文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要为大家详细介绍了如何通过D3.js实现绘制折线图，文中的示例代码讲解详细，对我们学习D3.js有一定的帮助，需要的可以参考一下2022-11-11
现将img元素对应的src路径设置为背景图片，而该img所对应的url路径存放在一个自设的属性中2014-03-03
大家在制作网页或者小程序的时候经常用到随机数，作者整理了一个很简单的JS生成随机数的程序，一起学习下。2018-02-02
本篇文章记录如何通过js代码实现复制内容到剪切板,之后可以粘贴到需要的地方的功能,文中通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-09-09
在JavaScript中，我们应该尽可能的用局部变量来代替全局变量，这句话所有人都知道，可是这句话是谁先说的？2009-05-05
用javascript获得地址栏参数的两种方法...2006-11-11
最新评论