2014年5月27日 星期二

仿 Yahoo 滾動式訊息跑馬燈加強版

http://abgne.tw/jquery/apply-jquery/jquery-yahoo-scroll-message-marquee-plus.html/comment-page-1#comments

有同學問說能否在訊息跑馬燈中加入上下鈕，預設是往下滾動來看訊息，但若使用者點了往上時則再切回上一個訊息。這樣的跑馬燈讓我想到前幾篇的「仿 Yahoo 滾動式訊息跑馬燈」，只是再多加兩個按鈕來控制就可以了。

既然如此，就來動手把「仿 Yahoo 滾動式訊息跑馬燈」做點加強改造囉。首先就是要在 HTML 中多加那兩顆鈕：
檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11

<body>
 <div id="abgne_marquee">
  <div class="marquee_btn" id="marquee_next_btn"><img src="marquee_next_btn.jpg" /></div>
  <ul>
   <li><a href="http://www.flycan.com.tw/course/course_javascript.php">【開課快訊】04/11 JavaScript ＆ CSS 互動程式入門班 (週日班)</a></li>
   <li><a href="http://www.flycan.com.tw/course/course_photopro.php">【開課快訊】05/09 Photoshop 影像達人專修班 (週日班)</a></li>
   <li><a href="http://abgne.tw/site-proclamation/questionnaire-1.html">【調查】你的獎品你來決定 - 活動獎品大調查</a></li>
  </ul>
  <div class="marquee_btn" id="marquee_prev_btn"><img src="marquee_prev_btn.jpg" /></div>
 </div>
</body>
因為多了兩個左右護法出來，所以得讓我們的訊息主題往旁邊退一點點；同時也得為這兩個鈕來裝扮一下：
檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

div#abgne_marquee {
 position: relative;
 overflow: hidden; /* 超出範圍的部份要隱藏 */
 width: 415px;
 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;
 left: 30px;   /* 往後推個 30px */
}
div#abgne_marquee ul li a {
 display: block;
 overflow: hidden; /* 超出範圍的部份要隱藏 */
 font-size:12px;
 height: 25px;
 line-height: 25px;
 text-decoration: none;
}
div#abgne_marquee div.marquee_btn {
 position: absolute;
 cursor: pointer;
}
div#abgne_marquee div#marquee_next_btn {
 left: 5px;
}
div#abgne_marquee div#marquee_prev_btn {
 right: 5px;
}
如果沒什麼差錯的話，當完成到這一步時就能看到基本的畫面了：



再來就是把原本的程式做一點改造：
檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

$(function(){
 // 先取得 div#abgne_marquee ul
 // 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
 // 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
 // 設定跑馬燈移動的速度及輪播的速度
 var $marqueeUl = $('div#abgne_marquee ul'),
  $marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
  _height = $('div#abgne_marquee').height() * -1,
  scrollSpeed = 600,
  timer,
  speed = 3000 + scrollSpeed,
  direction = 0, // 0 表示往上, 1 表示往下
  _lock = false;
 
 // 先把 $marqueeli 移動到第二組
 $marqueeUl.css('top', $marqueeli.length / 2 * _height);
 
 // 幫左邊 $marqueeli 加上 hover 事件
 // 當滑鼠移入時停止計時器；反之則啟動
 $marqueeli.hover(function(){
  clearTimeout(timer);
 }, function(){
  timer = setTimeout(showad, speed);
 });
 
 // 判斷要往上還是往下
 $('div#abgne_marquee .marquee_btn').click(function(){
  if(_lock) return;
  clearTimeout(timer);
  direction = $(this).attr('id') == 'marquee_next_btn' ? 0 : 1;
  showad();
 });
 
 // 控制跑馬燈上下移動的處理函式
 function showad(){
  _lock = !_lock;
  var _now = $marqueeUl.position().top / _height;
  _now = (direction ? _now - 1 + $marqueeli.length : _now + 1)  % $marqueeli.length;
 
  // $marqueeUl 移動
  $marqueeUl.animate({
   top: _now * _height
  }, scrollSpeed, function(){
   // 如果已經移動到第二組時...則馬上把 top 設回到第一組的最後一筆
   // 藉此產生不間斷的輪播
   if(_now == $marqueeli.length - 1){
    $marqueeUl.css('top', $marqueeli.length / 2 * _height - _height);
   }else if(_now == 0){
    $marqueeUl.css('top', $marqueeli.length / 2 * _height);
   }
   _lock = !_lock;
  });
 
  // 再啟動計時器
  timer = setTimeout(showad, speed);
 }
 
 // 啟動計時器
 timer = setTimeout(showad, speed);
 
 $('a').focus(function(){
  this.blur();
 });
});
基本的程式架構並沒有什麼改變，只是一開始並不確定使用者會不會往上來看訊息，所以筆者就利用程式先把訊息移動到第二組：
檢視原始碼 JavaScript
1
2

// 先把 $marqueeli 移動到第二組
$marqueeUl.css('top', $marqueeli.length / 2 * _height);
接著再透過變數 direction 來決定是要往上還是往下來滾動訊息跑馬燈。
檢視原始碼 JavaScript
1
2

var _now = $marqueeUl.position().top / _height;
_now = (direction ? _now - 1 + $marqueeli.length : _now + 1)  % $marqueeli.length;
如果沒問題的話，現在的訊息跑馬燈預設就會往上跑，同時也能透過按鈕來決定跑馬燈的方向囉。
範例 1 範例 2 範例 3
檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
Ext JS 版：
範例 1 範例 2
於

沒有留言:

張貼留言