JS实现无缝滚动的完美解决

 想必大家都注意到<marquee>的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出<marquee>，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性：
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

好，先看这个向上滚动的代码：

< html >
     < body >
         < base  href ="http://www.webjx.com" >
   < 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/2004_Pack/logo.gif" >
   < img  src ="images/link/flashskylogo.gif" >
   < img  src ="images/link/5dlogo88.gif" >
   < img  src ="/Upload/2004_Pack/link.gif" >
   </ div >
   < div  id =demo2 ></ div >
   </ div >
     < script > ...
    var speed=30
    demo2.innerHTML=demo1.innerHTML
    demo.scrollTop=demo.scrollHeight
    function Marquee()...{
    if(demo2.offsetTop-demo.scrollTop<=0)
    demo.scrollTop-=demo2.offsetHeight
    else...{
    demo.scrollTop++
    }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() ...{clearInterval(MyMar)}
    demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}
     </ script >
</ body >
</ html >

 

向下滚动

< html >
     < body >< base  href ="http://www.webjx.com" >
   < 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/2004_Pack/logo.gif" >
   < img  src ="images/link/flashskylogo.gif" >
   < img  src ="images/link/5dlogo88.gif" >
   < img  src ="/Upload/2004_Pack/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() ...{MyMar=setInterval(Marquee,speed)}
     </ script >
</ body
</html >

 

向左滚动

< html >
     < body >
< base  href ="http://www.webjx.com" >
   < div  id =demo  style =overflow:hidden;height:33;width:500;background:#214984;color:#ffffff >
< table  align =left  cellpadding =0  cellspace =0  border =0 >< tr >< td  id =demo1  valign =top >
< 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/2004_Pack/logo.gif" >< img  src ="images/link/flashskylogo.gif" >
< img  src ="images/link/5dlogo88.gif" >< img  src ="/Upload/2004_Pack/link.gif" >
< img  src ="images/flash8.gif" ></ td >< td  id =demo2  valign =top ></ td ></ tr ></ table ></ div >
   < script > ...
  var speed=30
  demo2.innerHTML=demo1.innerHTML
  function Marquee()...{
  if(demo2.offsetWidth-demo.scrollLeft<=0)
  demo.scrollLeft-=demo1.offsetWidth
  else...{
  demo.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() ...{clearInterval(MyMar)}
  demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}
   </ script >  
</ body
</html >

 

向右滚动

< base  href ="http://www.webjx.com" >
   < div  id =demo  style =overflow:hidden;height:33;width:500;background:#214984;color:#ffffff >
< table  align =left  cellpadding =0  cellspace =0  border =0 >< tr >< td  id =demo1  valign =top >
< 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/2004_Pack/logo.gif" >< img  src ="images/link/flashskylogo.gif" >
< img  src ="images/link/5dlogo88.gif" >< img  src ="/Upload/2004_Pack/link.gif" >
< img  src ="images/flash8.gif" ></ td >< td  id =demo2  valign =top ></ td ></ tr ></ table ></ div >
   < script > ...
  var speed=30
  demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
  function Marquee()...{
  if(demo.scrollLeft<=0)
  demo.scrollLeft+=demo2.offsetWidth
  else...{
  demo.scrollLeft--
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() ...{clearInterval(MyMar)}
  demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}
   </ script >