【Google Site】abgne_marquee跑馬燈

不同語法，相同效果。又在誤打誤撞的情況下發現了一則適用GoogleSite新的文字輪播語法-abgne_marquee，雖然abgne_marquee的語法比較起來長了些。
【Google Site】用html小工具做出marqueer效果
實驗所-abgne_marquee Demo

引用javascript來做一定就要動用到htmlBox，所以同樣的htmlBox裡面還是包含三部分-主要文字、css語法、javascript語法。主要文字部分就是html，一般來說還是會寫在<div>裡，當作是一個區隔，css語法則是寫在<style>裡，通常包含了邊框的大小，還有文字的所有樣式，最後就是<script>，在GoogleSite中要寫jquery記得要引入https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js或是 jquery1.6版本，才能順利運作唷。

首先是html的主要輪播文字部分

  <div id="abgne_marquee">  
  <ul>  
   <li><a href="http://youtu.be/NO6DkMOgj0Q">我冷漠是不想被看出太容易被感動觸及 </a></li>  
   <li><a href="http://youtu.be/NO6DkMOgj0Q">我比較喜歡現在的自己不太想回到過去 </a></li>  
   <li><a href="http://youtu.be/NO6DkMOgj0Q">我常常為我們之間 忽遠忽近的關係 擔心或委屈 </a></li>  
   <li><a href="http://youtu.be/NO6DkMOgj0Q">別人只一句話 就刺痛心裡每一根神經 </a></li>  
  </ul>  
  </div>  

接著是css的<style>

 <style>  
  div#abgne_marquee {  
  position: relative;  
  overflow: hidden;   
  width: 375px;  
  height: 25px;  
  border: 1px solid #ccc;  
 }  
 div#abgne_marquee ul, div#abgne_marquee li {  
  margin: 0;  
  padding: 0;  
  list-style: none;  
 }  
 div#abgne_marquee ul {  
  position: absolute;  
 }  
 div#abgne_marquee ul li a {  
  display: block;  
  overflow: hidden;   
  font-size:12px;  
  height: 25px;  
  line-height: 25px;  
  text-decoration: none;  
 }  
 </style>  

最後是<script>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"> </script>  
 <script>  
 $(function(){  
  var $marqueeUl = $('div#abgne_marquee ul'),  
  $marqueeli = $marqueeUl.append($marqueeUl.html()).children(),  
  _height = $('div#abgne_marquee').height() * -1,  
  scrollSpeed = 600,  
  timer,  
  speed = 3000 + scrollSpeed;  
  $marqueeli.hover(function(){  
  clearTimeout(timer);  
  }, function(){  
  timer = setTimeout(showad, speed);  
  });  
  function showad(){  
  var _now = $marqueeUl.position().top / _height;  
  _now = (_now + 1) % $marqueeli.length;  
  $marqueeUl.animate({  
   top: _now * _height  
  }, scrollSpeed, function(){  
   if(_now == $marqueeli.length / 2){  
   $marqueeUl.css('top', 0);  
   }  
  });  
  timer = setTimeout(showad, speed);  
  }  
  timer = setTimeout(showad, speed);  
  $('a').focus(function(){  
  this.blur();  
  });  
 });  
 </script>  

關於檔案這次就不提供囉，有興趣的可以直接複製Demo網頁提供的語法。