我這裡說的「文字垂直捲動跑馬燈」就是像大家常常在Yahoo!奇摩首頁看到中間的那一塊文字廣告，它三不五時就會往上捲一下捲一下，讓我每次看到眼睛都很難受
最近剛好有個案子就需要在首頁放一個類似這樣的東西，嗯～我心想：好哇，那簡單，這種東西去咕狗一下，一定很多jQuery的Plugin可以用。結果我左咕狗右咕狗，都給我出現什麼 [80個超炫jQuery屎來的外掛] 啦，不然就是什麼 [28個你一定要下載的超級好用jQuery屎來的外掛] 啦，然後裡面真的都是很炫超級好用的Slider，都是功能超多、轉場效果超級炫的外掛。
是很炫沒錯啦，只是But…這這這，我只是要弄個文字連結捲一下捲一下就好了，你讓我放一堆照片嚕來嚕去，還可以飛出去轉一圈再飛進來是怎麼回事，我不需要這樣肥大的東西啊～～
好吧，既然不給我，那就自己來寫一個總可以吧～ 結果咕狗到一個佛心來的前輩寫的範例，再加上研究幾個小時把它改寫成我需要的樣子，然後再用jQuery包一包，結果就是將將將，第一支jQuery Plugin就生出來了～
jQuery TextSlider Plugin
Demo: [jQuery TextSlider Plugin]
Download: [jQuery TextSlider Plugin]
功能 Feature
- 無限循環捲動
- 可以設定向上或向下捲動
- 可以設定一次捲動幾個元素
- 游標移過去會停止捲動，移開會繼續捲動
使用方式 Usage
1. 在頁面的<head>載入jQuery和本Plugin
|
1 2 |
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.textslider.min.js"></script> |
2. HTML部分:
|
1 2 3 4 5 6 7 |
<div class="slideText"> <ul> <li><a href="#">集中V胸罩 秀美腿褲裙 超美呦絲襪 吸引人洋裝 型男長腿褲</a></li> <li><a href="#">性感女神褲襪 復古短靴 甜心短裙 心動露肩洋 暖暖室內鞋</a></li> <li><a href="#">經典晚宴絲襪 學院窄裙 頂級細跟鞋 放電大眼妝 寶貝超Q服</a></li> </ul> </div> |
3. 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 |
.slideText { position: relative; overflow: hidden; width: 100%; height: 3em; } .slideText ul, .slideText li { margin: 0; padding: 0; list-style: none; width: 100%; } .slideText ul { position: absolute; } .slideText li { text-align: center; } .slideText li a { display: block; overflow: hidden; font-size: 1em; height: 1.5em; line-height: 1.5em; text-decoration: none; } .slideText li a:hover { text-decoration: underline; } |
4. 最後啟用跑馬燈:
|
1 2 3 4 5 6 |
$('.slideText').textslider({ direction : 'scrollUp', // 捲動方向: scrollUp向上, scrollDown向下 scrollNum : 1, // 一次捲動幾個元素 scrollSpeed : 800, // 捲動速度(ms) pause : 3200 // 停頓時間(ms) }); |
參數很簡單，就4個:
- direction : 捲動的方向，目前只有兩種方向，scrollUp向上，scrollDown向下
- scrollNum : 一次捲動幾個<li>元素，這個設定值必須是<li>元素總數的約數，也就是說，<li>元素總數必須能整除scrollNum，例如<li>的元素總數是10的話，那麼scrollNum只能設定為1或2或5或10，如果是6的話，那麼就是1,2,3,6
- scrollSpeed : 捲動的速度，這個設定值是millisecond，1000相當於1秒
- pause : 捲動一次停頓的時間，這個設定值也是millisecond，1000相當於1秒
Demo: [jQuery TextSlider Plugin]
Download: [jQuery TextSlider Plugin]
(function f(){$(“.slideText li:first”).animate({“margin-top”:-$(“.slideText li”).height()},function(){$(this).appendTo(“.slideText ul”).css(“margin-top”,0).delay(2000).show(f);})})();
(function f(){$(“.slideText li:last”).css(“margin-top”,-$(“.slideText li:last”).height()).prependTo(“.slideText ul”).delay(2000).animate({“margin-top”:0},f)})();
It’s in reality a great and helpful piece of information. I am glad that you shared this useful info with us. Please keep us informed like this. Thank you for sharing.|
其實、這個功能，只要使用 CSS Animations ，就能做到。
謝謝你的提醒。其實，你看看這篇文的發表時間2012年，應該也能猜到，當時CSS3的進展時程似乎還沒到Animation這個module，而且各大瀏覽器對CSS3 Animation的支援程度也沒到完整支援。不過還是感謝您的提醒，以現在2023年7月的時間點，CSS 3早已經有很多瀏覽器支援，這可以去查詢 [https://caniuse.com/] 或 MDN [https://developer.mozilla.org/zh-CN/] 都能知道的。