[jQuery] 用jQuery寫出文字垂直捲動跑馬燈 jQuery TextSlider Plugin

我這裡說的「文字垂直捲動跑馬燈」就是像大家常常在Yahoo!奇摩首頁看到中間的那一塊文字廣告,它三不五時就會往上捲一下捲一下,讓我每次看到眼睛都很難受

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]

在〈[jQuery] 用jQuery寫出文字垂直捲動跑馬燈 jQuery TextSlider Plugin〉中有 5 則留言

  1. (function f(){$(“.slideText li:first”).animate({“margin-top”:-$(“.slideText li”).height()},function(){$(this).appendTo(“.slideText ul”).css(“margin-top”,0).delay(2000).show(f);})})();

    回覆
  2. 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.|

    回覆
    • 謝謝你的提醒。其實,你看看這篇文的發表時間2012年,應該也能猜到,當時CSS3的進展時程似乎還沒到Animation這個module,而且各大瀏覽器對CSS3 Animation的支援程度也沒到完整支援。不過還是感謝您的提醒,以現在2023年7月的時間點,CSS 3早已經有很多瀏覽器支援,這可以去查詢 [https://caniuse.com/] 或 MDN [https://developer.mozilla.org/zh-CN/] 都能知道的。

      回覆

發佈留言