js 实现无缝滚动

以前代码是转载其他网站的，在这儿收藏下。

实现1：(兼容FF)

 

<div id="div_scroll" style=" padding-top:20px; overflow:hidden;height:60px;width:920px; margin:0 auto;">
     <table height="129" border=0 align=left cellpadding=0 cellspace=0>
       <tr><td id=div_scroll1 valign=buttom>
      <table width="918" height="60" border=0 cellpadding=0 cellspacing=0>
      
     <img  src="../images/mh_pattern.png"/>
      
      </table>
    </td><td id=div_scroll2 valign=top></td></tr></table></div>
   
     <SCRIPT>
  var speed1=25//速度数值越大速度越慢
  document.getElementById("div_scroll2").innerHTML=document.getElementById("div_scroll1").innerHTML
  function Marquee1(){
  if(document.getElementById("div_scroll2").offsetWidth-document.getElementById("div_scroll").scrollLeft<=0)
  document.getElementById("div_scroll").scrollLeft-=document.getElementById("div_scroll1").offsetWidth
  else{
  document.getElementById("div_scroll").scrollLeft++
  }
  }
  var MyMar1=setInterval(Marquee1,speed1)
  document.getElementById("div_scroll").οnmοuseοver=function () {clearInterval(MyMar1)}
  document.getElementById("div_scroll").οnmοuseοut=function () {MyMar1=setInterval(Marquee1,speed1)}
  </SCRIPT> 

 

 实现2：(兼容火狐)

 

< html > < head > < title ></ title > < script language ="javascript" type ="text/javascript" > function VScrollPanel() { this .width = null ; // 滚动范围宽度 this .height = null ; // 滚动范围高度 this .delay = 100 ; // 时间延迟 this .step = 1 ; // 单步滚动像素 } VScrollPanel.prototype = { // 滚动指定ID的内容 Bind: function (domID) { this .dom = document.getElementById(domID); if ( this .width) { this .dom.style.width = this .width + " px " ; } if ( this .height) { this .dom.style.height = this .height + " px " ; } this .dom.style.overflow = " hidden " ; this .Scrolling(); }, // 滚动方法 Scrolling: function () { // 如果内容太少,已经完全可以显示,不需滚动 if ( this .dom.scrollHeight <= this .dom.clientHeight) return ; // 滚动到最后一项,切换位置 if ( this .willSwap) { this .dom.appendChild( this .lastOne); this .willSwap = false ; } // 一个对象自身的引用 var _this = this ; if ( this .dom.scrollTop + this .step + this .dom.clientHeight >= this .dom.scrollHeight) { // 滚动到达底部 // 删除临时添加的首项 if ( this .tmp != null ) this .dom.removeChild( this .tmp); // 复制第一项,即将移至最后一项 this .lastOne = this .dom.firstChild; this .tmp = this .lastOne.cloneNode( true ); // 添加第一项 // this.lastOne.replaceNode(this.tmp); // 在此用replaceChild替代replaceNode即可兼容FF this .dom.replaceChild( this .tmp, this .lastOne); /* 至于为什么要复制第一项，并临时插入 是因为如果在滚动内容刚好足够滚动时，如果没有这个临时项， 直接移动第一项到最后一项的时候，会发生跳动现象。 也就是，比如：如果有4项，不会发生滚动，而如果有5项的时候，就发生这种现象 但6项以上的时候，正常 */ this .willSwap = true ; } this .dom.scrollTop += this .step; setTimeout( function () { /* 此处必须用 _this 代替 this 否则错误，原因在此不阐述 */ _this.Scrolling(); }, this .delay); }, Pause: function () { this .pauseStep = this .step; this .step = 0 ; }, Continue: function () { this .step = this .pauseStep; } }; /* 经过多次实验，水平滚动通过新建一个表格来设置布局 才能最有效的保证布局不会乱，不会发生换行 所以只好水平、垂直滚动的分开做了 */ // 水平滚动。以下代码思路同上，不再注释 function HScrollPanel() { this .width = null ; this .height = null ; this .delay = 100 ; this .step = 1 ; } HScrollPanel.prototype = { Bind: function (domID) { this .dom = document.getElementById(domID); this .rootDom = document.createElement( " table " ); this .rootDom.border = " 0 " ; this .rootDom.cellPadding = " 0 " ; this .rootDom.cellSpacing = " 0 " ; var tbody = document.createElement( " tbody " ); this .rootDom.appendChild(tbody); this .row = document.createElement( " tr " ); tbody.appendChild( this .row); var child = this .dom.firstChild; while (child != null ) { this .dom.removeChild(child); if (child.nodeType == 1 ) { var td = document.createElement( " td " ); td.vAlign = " top " ; td.appendChild(child); this .row.appendChild(td); } child = this .dom.firstChild; } this .dom.appendChild( this .rootDom); if ( this .width) { this .dom.style.width = this .width + " px " ; } if ( this .height) { this .dom.style.height = this .height + " px " ; } this .dom.style.overflow = " hidden " ; this .Scrolling(); }, Scrolling: function () { if ( this .dom.scrollWidth <= this .dom.clientWidth) return ; if ( this .willSwap) { this .row.appendChild( this .lastOne); this .willSwap = false ; } var _this = this ; if ( this .dom.scrollLeft + this .step + this .dom.clientWidth >= this .dom.scrollWidth) { if ( this .tmp != null ) { this .row.removeChild( this .tmp); } this .lastOne = this .row.firstChild; this .tmp = this .lastOne.cloneNode( true ); // this.lastOne.replaceNode(this.tmp); this .row.replaceChild( this .tmp, this .lastOne); this .willSwap = true ; } this .dom.scrollLeft += this .step; setTimeout( function () { _this.Scrolling(); }, this .delay); }, Pause: function () { this .pauseStep = this .step; this .step = 0 ; }, Continue: function () { this .step = this .pauseStep; } }; </ script > < style type ="text/css" > body,td { font-family : "宋体" ; font-size : 12px ; } .item { width : 150px ; background-color : #f0f0f0 ; text-align : center ; margin : 5px ; padding : 3px ; } </ style > </ head > < body > 垂直滚动示例 < input type ="text" value ="100" onchange ="SetDelay(this);" /> < div id ="divVScroll" onmouseover ="vsp.Pause();" onmouseout ="vsp.Continue()" > < div class ="item" > AAAAAA </ div > < div class ="item" > BBBBBB </ div > < div class ="item" > CCCCCC </ div > < div class ="item" > DDDDDD </ div > < div class ="item" > EEEEEE </ div > < div class ="item"