|
|
实现图片的无缝循环滚动 解决思路: 一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆副本,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到"无缝"滚动的目的。
具体步骤: 1.向上滚动。 <base href="http://www.flash8.net"> <div id=demo style=overflow:hidden;height:100;width:90; background:#214984;color:#ffffff> <div id=demo1> <img src="images/flash8.gif"> <img src="images/link/flashempire.gif"> <img src="images/linklogo/shlogo.gif"> <img src="images/link/deskcity.gif"> <img src="images/linklogo/5dmeng.gif"> <img src="/Upload/2005-09/logo.gif"> <img src="images/link/flashskylogo.gif"> <img src="images/link/5dlogo88.gif"> <img src="/Upload/2005-09/link.gif"> </div> <div id=demo2></div> </div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2 function Marquee(){ //当滚动至demo1与demo2交界时 if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的 demo.onmouseover=function() {clearInterval(MyMar)} //鼠标移开时重设定时器 demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} </script>
2.向下滚动。 <base href="http://www.flash8.net"> <div id=demo style=overflow:hidden;height:100;width:90; background:#214984;color:#ffffff> <div id=demo1> <img src="images/flash8.gif"> <img src="images/link/flashempire.gif"> <img src="images/linklogo/shlogo.gif"> <img src="images/link/deskcity.gif"> <img src="images/linklogo/5dmeng.gif"> <img src="/Upload/2005-09/logo.gif"> <img src="images/link/flashskylogo.gif"> <img src="images/link/5dlogo88.gif"> <img src="/Upload/2005-09/link.gif"> </div> <div id=demo2></div> </div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollTop=demo.scrollHeight function Marquee(){ if(demo1.offsetTop-demo.scrollTop>=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function()&n
|