《javascript实现平滑无缝滚动_.docx》由会员分享，可在线阅读，更多相关《javascript实现平滑无缝滚动_.docx（4页珍藏版）》请在三一文库上搜索。
1、javascript实现平滑无缝滚动_ 这篇文章主要为大家具体介绍了javascript实现平滑无缝滚动的具体代码，具有肯定的参考价值，感爱好的小伙伴们可以参考一下 首先是网页样式： #demo background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; #demo img border: 3px solid #F2F2F2; #indemo float: left; width: 800%; #demo1 float: left; #demo2 float: left; 布局
2、如下： div id=demo div id=indemo div id=demo1 a href=#img src=banner.jpg border=0 /a a href=#img src=banner2.jpg border=0 /a /div div id=demo2/div /div /div 具体的JS实现： script var speed=10; var tab=document.getElementById(demo); var tab1=document.getElementById(demo1); var tab2=document.getElementById(dem
3、o2); tab2.innerHTML=tab1.innerHTML; function Marquee() if(tab2.offsetWidth-tab.scrollLeft=0) tab.scrollLeft-=tab1.offsetWidth else tab.scrollLeft+; var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() clearInterval(MyMar); tab.onmouseout=function() MyMar=setInterval (Marquee,speed); /scr
4、ipt 这里要留意的是： scrollLeft代表页面利用滚动条滚动到右侧时，隐蔽在滚动条左侧的页面的宽度。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小转变。 setInterval() 方法可根据指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。 明白了这个具体的实现就好理解了。 实现的原理是这样的：首先将需要滚动的内容复制一份。当右侧的div显示的内容与左侧影藏的内容宽度相同时将父容器左侧影藏的内容显示出来，这样就实现了将左侧影藏的内容显示出来同时将右侧内容重新隐蔽。假如右侧内容显示的部分少于左侧影藏的内容就连续讲父容器想左侧移动，实现隐蔽。其中有一点需要留意的是，由于这里是将两张图片同时放入左侧，当右侧显示了一半时会将左侧影藏的完全显示出来，又由于右侧显示的内容与左侧的左边内容相同所以实现了循环滚动的效果。 这样平滑的滚动就实现了。 以上就是本文的全部内容，盼望对大家的学习有所关心。 .