【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。是不是很簡單呢？～^^

這個網誌中的熱門文章