您当前的位置：首页 > 技术分享网站首页技术分享

js实现文字无缝滚动效果

发布时间：2018-01-26作者：贾忠智点击：2234

首先是页面中加一个div，如下：

<div style="z-index:999px;">
                <div id="demo" style="OVERFLOW: hidden; WIDTH: 530px; HEIGHT: 20px; ">
                          <div id="demo1"><a>这里是内容，这里是内容，这里是内容，这里是内容，这里是内容，这里是内容，这里是内容，这里是内容，这里是内容，这里是内容，这里是内容，这里是内容</a>
                          </div>
                          <div id="demo2">&nbsp;</div>
                       
                </div>
                </div>

其中 z-index是为了使内容显示在浏览器的最上面一层，不被其他内容所遮盖。

然后引用js脚本如下：
< script type="text/javascript">
< !--
var speed=70
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
  demo.scrollLeft-=demo1.offsetWidth
else
  demo.scrollLeft++
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
// -->
            </script>       

然后运行可以查看效果。