滾動式訊息跑馬燈 jQuery語法 ~ 孟甲商行

2013年11月18日星期一

滾動式訊息跑馬燈 jQuery語法

2013年11月18日星期一晚上9:49 1 comment

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>孟甲商行</title>
<style type="text/css">
 div#myturn_marquee {
  position: relative;
  overflow: hidden; /* 超出範圍的部份要隱藏 */
  width: 380px;
  height: 25px;
  border: 1px solid #ccc;
 }
 div#myturn_marquee ul, div#myturn_marquee li {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 div#myturn_marquee ul {
  position: absolute;
 }
 div#myturn_marquee ul li a {
  display: block;
  overflow: hidden; /* 超出範圍的部份要隱藏 */
  font-size:12px;
  height: 25px;
  line-height: 25px;
  text-decoration: none;
 }
</style>
<script type="text/javascript">
 $(function(){
  // 先取得 div#myturn_marquee ul
  // 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
  // 再來取得 div#myturn_marquee 的高來決定每次跑馬燈移動的距離
  // 設定跑馬燈移動的速度及輪播的速度
  var $marqueeUl = $('div#myturn_marquee ul'),
   $marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
   _height = $('div#myturn_marquee').height() * -1,
   scrollSpeed = 600,
   timer,
   speed = 3000 + scrollSpeed;
  
  // 幫左邊 $marqueeli 加上 hover 事件
  // 當滑鼠移入時停止計時器；反之則啟動
  $marqueeli.hover(function(){
   clearTimeout(timer);
  }, function(){
   timer = setTimeout(showad, speed);
  });
  
  // 控制跑馬燈移動的處理函式
  function showad(){
   var _now = $marqueeUl.position().top / _height;
   _now = (_now + 1) % $marqueeli.length;
   
   // $marqueeUl 移動
   $marqueeUl.animate({
    top: _now * _height
   }, scrollSpeed, function(){
    // 如果已經移動到第二組時...則馬上把 top 設 0 來回到第一組
    // 藉此產生不間斷的輪播
    if(_now == $marqueeli.length / 2){
     $marqueeUl.css('top', 0);
    }
   });
   
   // 再啟動計時器
   timer = setTimeout(showad, speed);
  }
  
  // 啟動計時器
  timer = setTimeout(showad, speed);

$('a').focus(function(){
   this.blur();
  });
 });
</script>
</head>

<body>
 <div id="myturn_marquee">
  <ul>
   <li><a href="http://www.pcstore.com.tw/monga7/M14441500.htm">【最新快訊公告】[Pchome]童話村~庭園景觀-4人森林公主套房~特賣！</a></li>
   <li><a href="http://eagle1024.blogspot.tw/2011/07/blog-post_8054.html">【公娼寮】從一個艋舺孩子的成長過程看性交易文化</a></li>
   <li><a href="http://eagle1024.blogspot.tw/2011/07/blog-post_6864.html">【第一泡茶】第一泡茶，要不要倒掉？ 泡茶技巧 坐在電腦桌前的上班族，一定要常喝茶</a></li>
  </ul>
 </div>
</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

1 則留言:

匿名2019年10月16日晚上10:56
0.1
13241
1324
1654
1635413
回覆刪除
回覆

新增留言

1.猛甲茶道，歡迎多留言，可以幫自己網站打廣告~
2.需要猛甲茶道回覆，請勿使用匿名留言[可使用名稱/網址，名稱填自己名字，若無網址，請填E-mail]。
3.匿名攻訐、不相干之廣告適用於無條件刪去法，望請海涵:)
4.您可以使用一些 HTML 標記，如：
　<b>粗體</b>, <i>斜體</i>, <a href='網址'>描述文字</a>

2013年11月18日星期一