【Google Site】用html小工具做出marqueer效果

先前在學校googlesite首頁為應老闆要求加入跑馬燈,所以先做好一個marquee的html擺在學校的網頁空間,再把網頁用iframe的方式連過來,會這麼麻煩的原因主要是因為googlesite之前還沒有開放html小工具,所以只要有javascript或是其他語言一律都會被擋下,每次要新增marquee項目都還要上學校空間才能完成任務,真的是非常的「擾民」。
所幸,googlesite在近期的改版終於新增了「html小工具」,初步測試結果已經可以相容大部份的javascript,讓老googlesite動起來的機會總算是大了一些些,不再需要全部依靠embed其他服務空間的flash,但是重要的jquery還沒有支援,我想可能要再等一陣子,值得好好的期待一下。

不囉說,來提供一下marquee程式碼,搞不好需要他的時候再來找他泡茶~以下的程式碼分成三段,全部都擺在<body>裡面就可以了。<div>裡面的中文字部分,就是跑馬燈內容,請自行動手~

 <style>  
 .ann{overflow:hidden;height:20px;}  
 </style>  

 <div id="ann_box" class="ann" style="width:500px;">  
  <div id="a1" class="ann"><a href="exp01.php" >我多想說沒有關係,我還愛你</a></div>  
  <div id="a2" class="ann">卻擠不出一絲力氣</div>  
  <div id="a3" class="ann">是我錯過什麼記憶 才從幸福跳到這裡</div>  
  <div id="a4" class="ann">最怕自己從今以後 什麼都不相信</div>  
  <div id="a5" class="ann">當初多勇敢愛了妳 多勇敢才能原諒你</div>  
 </div>  

 <script>  
 function slideLine(box,stf,delay,speed,h)  
 {  
  var slideBox = document.getElementById(box);  
  var delay = delay||1000,speed = speed||20,h = h||20;  
  var tid = null,pause = false;  
  var s = function(){tid=setInterval(slide, speed);}  
  var slide = function(){  
   if(pause) return;  
   slideBox.scrollTop += 1;  
   if(slideBox.scrollTop%h == 0){  
    clearInterval(tid);  
    slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);  
    slideBox.scrollTop = 0;  
    setTimeout(s, delay);  
   }  
  }  
  slideBox.onmouseover=function(){pause=true;}  
  slideBox.onmouseout=function(){pause=false;}  
  setTimeout(s, delay);  
 }  
 slideLine('ann_box','div',2000,25,20);  
 </script>  

最後是script。是不是很簡單呢?~^^

這個網誌中的熱門文章