success‎ > ‎

abgne_marquee


文字輪播部分

 <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>


jquery

<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>