Marquee.js

參數(shù)說明:  
demo  字幕區(qū)域標(biāo)簽(div)的ID; 
demo1/demo2  顯示內(nèi)容標(biāo)簽(div或td)的ID   demo1為原始內(nèi)容,demo2是它的拷貝;  
direction 字幕方向(up,down,left,right) ; 
delay 字幕播放的延遲時(shí)間(毫秒); 
step 字幕播放的步長(即pix,步長越小,如step=1,滾動(dòng)越平滑)



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的話,把它添加進(jìn)去就行了; 否則你需要先引用下面的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文件已經(jīng)搞定了,開始寫HTML代碼:

(1)先添加css樣式,如果你不想滾動(dòng)字幕里的內(nèi)容被無故撐大的話(有時(shí)候)
<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)添加字幕區(qū)域內(nèi)容
1. 向上或向下滾動(dòng)    

<div id="d1" style="overflow:hidden;height:200px;width:90px">
   <div id="d11" width="100%" class="wrap">
    =頂部=<br>動(dòng)感地帶資費(fèi)攻略1 動(dòng)感地帶資費(fèi)攻略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的內(nèi)容高度不足200,故字幕默認(rèn)不會(huì)滾動(dòng),要實(shí)現(xiàn)滾動(dòng)的話,只需d11的height>200就行了,故只需在d11的里面再放個(gè)空div就行了,讓它的height=200; 如果d11的內(nèi)容高度大于了200px,則字幕區(qū)域d1將無間斷滾動(dòng)

2. 向左或向右滾動(dòng)


<div id="d2" style="overflow:hidden;width:500">
  <table>
   <tr>
    <td id="d21">
     <nobr>
      [開始]動(dòng)感地帶資費(fèi)攻略1 動(dòng)感地帶資費(fèi)攻略2 動(dòng)感地帶資費(fèi)攻略3 動(dòng)感地帶資費(fèi)攻略4 動(dòng)感地帶資費(fèi)攻略5 動(dòng)感地帶資費(fèi)攻略6 動(dòng)感地帶資費(fèi)攻略7 動(dòng)感地帶資費(fèi)攻略8 動(dòng)感地帶資費(fèi)攻略9 動(dòng)感地帶資費(fèi)攻略10 動(dòng)感地帶資費(fèi)攻略11 動(dòng)感地帶資費(fèi)攻略12 動(dòng)感地帶資費(fèi)攻略13 動(dòng)感地帶資費(fèi)攻略14 動(dòng)感地帶資費(fèi)攻略15 動(dòng)感地帶資費(fèi)攻略16 動(dòng)感地帶資費(fèi)攻略17 動(dòng)感地帶資費(fèi)攻略18 動(dòng)感地帶資費(fèi)攻略19 動(dòng)感地帶資費(fèi)攻略20[結(jié)束]　
     </nobr>
    </td>
    <td id="d22"></td>
   </tr>
  </table>
 </div>
 <script>var obj2 = new Marquee("d2","d21","d22","left");</script>

實(shí)現(xiàn)原理同上,至于為什么這里要用table而不用div,是因?yàn)閐iv在默認(rèn)情況只能判斷height,而不能判斷width,而table卻恰恰相反,上面用到的nobr標(biāo)簽也是必需的,防止字幕自動(dòng)換行!

附:  更改延遲播放速度 obj2.delay(50); 或 obj2.delay("50");
　　更改播放步長　　obj2.step(50); 或 obj2.step("50");
　　停止播放 obj2.stop(); 　繼續(xù)播放 obj2.start();
　　更改播放方向(同類型方向)　　obj2.direction("right");

最新評(píng)論