我這裡說的「文字垂直捲動跑馬燈」就是像大家常常在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
2. HTML部分:
3. CSS部分:
4. 最後啟用跑馬燈:
參數很簡單，就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/] 都能知道的。