David's Blog

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

| 2 Comments

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

<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部分:

    <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部分:

.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. 最後啟用跑馬燈:

    $('.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]

2 Comments

  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)})();

Leave a Reply

Required fields are marked *.