Marquee.js 参数说明:   demo  字幕区域标签(div)的ID;  demo1/demo2  显示内容标签(div或td)的ID   demo1为原始内容,demo2是它的拷贝;   direction 字幕方向(up,down,left,right) ;  delay 字幕播放的延迟时间(毫秒);  step 字幕播放的步长(即pix,步长越小,如step=1,滚动越平滑) function Marquee (demo, demo1, demo2, direction, delay, step) {  direction = direction.toLowerCase();  if(((direction == "up" || direction == "down") && ($(demo1).offsetHeight > $(demo).offsetHeight)) || ((direction == "left" || direction == "right") && ($(demo1).offsetWidth > $(demo).offsetWidth)))  {   $(demo2).innerHTML = $(demo1).innerHTML;   if(direction == "down")    $(demo).scrollTop = 2 * $(demo1).offsetHeight - $(demo).offsetHeight;   if(direction == "right")    $(demo).scrollLeft = 2 * $(demo1).offsetWidth - $(demo).offsetWidth;  }  else   return;  var flag = true;  var speed = delay == null? 1 : parseInt(delay);  var amount = step == null? 1 : parseInt(step);  var Marquee = function ()  {   switch(direction)   {    case "up":     if($(demo2).offsetTop - $(demo).scrollTop <= 0)      $(demo).scrollTop -= $(demo1).offsetHeight;     else      $(demo).scrollTop += amount;     break;    case "down":     if($(demo1).offsetTop - $(demo).scrollTop >= 0)      $(demo).scrollTop += $(demo2).offsetHeight;     else      $(demo).scrollTop -= amount;     break;    case "left":     if($(demo2).offsetWidth - $(demo).scrollLeft <= 0)      $(demo).scrollLeft -= $(demo1).offsetWidth;     else      $(demo).scrollLeft += amount;     break;    case "right":     if($(demo).scrollLeft <= 0)      $(demo).scrollLeft += $(demo2).offsetWidth;     else      $(demo).scrollLeft -= amount;     break;    default:break;   }  }  var timer = setInterval(Marquee,speed);  var play = function ()  {   if(flag)   {    clearInterval(timer);    timer = setInterval(Marquee, speed);   }  }  $(demo).onmouseover = function ()  {   if(flag)    clearInterval(timer);  }  $(demo).onmouseout = function ()  {   if(flag)    timer = setInterval(Marquee, speed);  }  this.delay = function (s)  {   speed = s == null? 50 : parseInt(s);   play();  }  this.step = function (s)  {   amount = s == null? 1 : parseInt(s);   play();  }  this.start = function ()  {   if(!flag)   {    flag = true;    play();   }  }  this.stop = function ()  {   if(flag)   {    flag = false;    clearInterval(timer);   }  }  this.direction = function (s)  {   s = s.toLowerCase();   if( s == direction )    return;   if(s == "down" && direction == "up" )    direction = s;   if(s == "up" && direction == "down")    direction = s;   if(s == "right" && direction == "left")    direction = s;   if(s == "left" && direction == "right")    direction = s;   if (s == direction)    play();  } }  上面js里用到的$或$F,如果你用过prototype.js的话,把它添加进去就行了; 否则你需要先引用下面的js文件: Ruby.js  (从prototype.js里截过来的 呵呵) function Ruby () { } if (!Array.prototype.push) {    Array.prototype.push = function() {        var startLength = this.length;        for (var i = 0; i < arguments.length; i++)        this[startLength + i] = arguments[i];       return this.length;    }  } $ = function () {   var elements = new Array();    for (var i = 0; i < arguments.length; i++) {      var element = arguments[i];      if (typeof element == ''string'')        element = document.getElementById(element);      if (arguments.length == 1)        return element;      elements.push(element);    }    return elements; } $F = function () {  if(arguments.length == 1)   return document.getElementById(arguments[0]).value;  else  {   var elements = new Array();   for(var i = 0;i< arguments.length; i++)   {    elements.push(document.getElementById(arguments[i]).value);   }   return elements;  } }  到这里,js文件已经搞定了,开始写HTML代码: (1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候) <style> .wrap{word-break:break-all;overflow:hidden} </style> (2)添加js文件  -->用了prototype.js的更好,替换掉Ruby.js   :) <script src="Ruby.js"></script> <script src="Marquee.js"></script> (3)添加字幕区域内容 1. 向上或向下滚动     <div id="d1" style="overflow:hidden;height:200px;width:90px">    <div id="d11" width="100%" class="wrap">     =顶部=<br>动感地带资费攻略1 动感地带资费攻略2<br>=底部=    </div>    <div id="d12" width="100%" class="wrap"></div>   </div>   <script>var obj1 = new Marquee("d1","d11","d12","up");</script> 由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行了,故只需在d11的里面再放个空div就行了,让它的height=200; 如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动 2. 向左或向右滚动 <div id="d2" style="overflow:hidden;width:500">   <table>    <tr>     <td id="d21">      <nobr>       [开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束]　      </nobr>     </td>     <td id="d22"></td>    </tr>   </table>  </div>  <script>var obj2 = new Marquee("d2","d21","d22","left");</script> 实现原理同上,至于为什么这里要用table而不用div,是因为div在默认情况只能判断height,而不能判断width,而table却恰恰相反,上面用到的nobr标签也是必需的,防止字幕自动换行! 附:  更改延迟播放速度 obj2.delay(50); 或 obj2.delay("50"); 　　更改播放步长　　obj2.step(50); 或 obj2.step("50"); 　　停止播放 obj2.stop(); 　继续播放 obj2.start(); 　　更改播放方向(同类型方向)　　obj2.direction("right");