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      $(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      $(demo).scrollleft -= $(demo1).offsetwidth;
    else
     $(demo).scrollleft += amount;
    break;
   case right:
    if($(demo).scrollleft      $(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       this[startlength + i] = arguments[i]; 
     return this.length; 
  } 
}
$ = function ()
{
  var elements = new array();
for (var i = 0; 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  {
   elements.push(document.getelementbyid(arguments[i]).value);
  }
  return elements;
 }
}
到这里,js文件已经搞定了,开始写html代码:
(1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候)
(2)添加js文件  -->用了prototype.js的更好,替换掉ruby.js   :)
(3)添加字幕区域内容
1. 向上或向下滚动
=顶部=
动感地带资费攻略1 动感地带资费攻略2
=底部=
由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行了,故只需在d11的里面再放个空div就行了,让它的height=200; 如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动
2. 向左或向右滚动
[开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束]
实现原理同上,至于为什么这里要用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);