有同學問說能否在訊息跑馬燈中加入上下鈕,預設是往下滾動來看訊息,但若使用者點了往上時則再切回上一個訊息。這樣的跑馬燈讓我想到前幾篇的「仿 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); |
檢視原始碼 JavaScript
1 2 | var _now = $marqueeUl.position().top / _height; _now = (direction ? _now - 1 + $marqueeli.length : _now + 1) % $marqueeli.length; |
Ext JS 版:
沒有留言:
張貼留言