David's Blog

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

| 2 留言

我這裡說的「文字垂直捲動跑馬燈」就是像大家常常在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
[cc lang=”html”]


[/cc]

2. HTML部分:
[cc lang=”html”]

[/cc]

3. CSS部分:
[cc lang=”css”]
.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;
}
[/cc]

4. 最後啟用跑馬燈:
[cc lang=”javascript”]
$(‘.slideText’).textslider({
direction : ‘scrollUp’, // 捲動方向: scrollUp向上, scrollDown向下
scrollNum : 1, // 一次捲動幾個元素
scrollSpeed : 800, // 捲動速度(ms)
pause : 3200 // 停頓時間(ms)
});
[/cc]

參數很簡單,就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]

2 則留言

  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. (function f(){$(“.slideText li:last”).css(“margin-top”,-$(“.slideText li:last”).height()).prependTo(“.slideText ul”).delay(2000).animate({“margin-top”:0},f)})();

發佈留言

Required fields are marked *.