標籤

4GL (1) 人才發展 (10) 人物 (3) 太陽能 (4) 心理 (3) 心靈 (10) 文學 (31) 生活常識 (14) 光學 (1) 名句 (10) 即時通訊軟體 (2) 奇狐 (2) 爬蟲 (1) 音樂 (2) 產業 (5) 郭語錄 (3) 無聊 (3) 統計 (4) 新聞 (1) 經濟學 (1) 經營管理 (42) 解析度 (1) 遊戲 (5) 電學 (1) 網管 (10) 廣告 (1) 數學 (1) 機率 (1) 雜趣 (1) 證券 (4) 證券期貨 (1) ABAP (15) AD (1) agentflow (4) AJAX (1) Android (1) AnyChart (1) Apache (14) BASIS (4) BDL (1) C# (1) Church (1) CIE (1) CO (38) Converter (1) cron (1) CSS (23) DMS (1) DVD (1) Eclipse (1) English (1) excel (5) Exchange (4) Failover (1) Fedora (1) FI (57) File Transfer (1) Firefox (3) FM (2) fourjs (1) Genero (1) gladiatus (1) google (1) Google Maps API (2) grep (1) Grub (1) HR (2) html (23) HTS (8) IE (1) IE 8 (1) IIS (1) IMAP (3) Internet Explorer (1) java (4) JavaScript (22) jQuery (6) JSON (1) K3b (1) ldd (1) LED (3) Linux (117) Linux Mint (4) Load Balance (1) Microsoft (2) MIS (2) MM (51) MSSQL (1) MySQL (27) Network (1) NFS (1) Office (1) OpenSSL (1) Oracle (126) Outlook (3) PDF (6) Perl (60) PHP (33) PL/SQL (1) PL/SQL Developer (1) PM (3) Postfix (2) postfwd (1) PostgreSQL (1) PP (50) python (5) QM (1) Red Hat (4) Reporting Service (28) ruby (11) SAP (234) scp (1) SD (16) sed (1) Selenium (3) Selenium-WebDriver (5) shell (5) SQL (4) SQL server (8) sqlplus (1) SQuirreL SQL Client (1) SSH (2) SWOT (3) Symantec (2) T-SQL (7) Tera Term (2) tip (1) tiptop (24) Tomcat (6) Trouble Shooting (1) Tuning (5) Ubuntu (37) ufw (1) utf-8 (1) VIM (11) Virtual Machine (2) VirtualBox (1) vnc (3) Web Service (2) wget (1) Windows (19) Windows (1) WM (6) Xvfb (2) youtube (1) yum (2)

2014年5月27日 星期二

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

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

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

既然如此,就來動手把「仿 Yahoo 滾動式訊息跑馬燈」做點加強改造囉。首先就是要在 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>
因為多了兩個左右護法出來,所以得讓我們的訊息主題往旁邊退一點點;同時也得為這兩個鈕來裝扮一下:
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

沒有留言:

張貼留言