一個好用的 jQuery 跑馬燈

找到一個很好用的跑馬燈 jQuery plugin....

關於這個好用的 jQuery 跑馬燈,在 91 兄的文章〈將marquee plugin封裝成User Control〉 裡面已經有介紹過。

我之所以將現有網站的跑馬燈換掉,改用這個 plugin,主要是因為此 plugin 在顯示跑馬燈文字時,能夠先以垂直滾動的方式,由上而下出現,然後停留幾秒鐘,再變成水平滾動,將文字向左方滾動。直到文字全部離開顯示區塊,又再回到垂直滾動出現,如此周而復始。

這裡有示範網頁可以看各種效果:Giva Labs - Marquee Example Page

這種滾動方式很貼心的地方是,它讓使用者在一秒內就能看到跑馬燈的文字內容(垂直滾動顯現),而不像傳統跑馬燈(例如 HTML 的 marquee 標籤)得要使用者耐心等待文字從顯示區塊的右邊界冒出來,滾阿滾的,慢慢滾到眼前--光為了看第一句,就得花好多時間(滾動速度是可以調快,但太快又不利眼珠捕捉文字)。

正是:一眼看不完,字字相連到邊邊。

重複使用

和 91 兄一樣,我也是封裝成 User Control。唯有如此,才夠方便。因為網站裡面有超過十個頁面都要顯示相同的跑馬燈,若將來要調整內容、位置、或樣式,改一個地方就好。需要加入跑馬燈的網頁呢,直接把跑馬燈 User Control 從 Solution Explorer 拖拉到網頁上欲顯示跑馬燈的位置就做完了。輕鬆愉快!

我的跑馬燈 User Control 的 .ascx 原始碼如下:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="NewsMarquee.ascx.vb" Inherits="UserControls_NewsMarquee" %>
<script type="text/javascript" src="/Scripts/jquery.marquee/lib/jquery.marquee.js"></script>
<link rel="stylesheet" type="text/css" href="/Scripts/jquery.marquee/css/jquery.marquee.css" />

<div style="text-align: center; margin-top: -24px; margin-left: 4px; margin-right: 10px;">
    <ul id="marquee" class="marquee">
        <li><%= MyApp.AppCache.HeadlineNewsText%></li>
    </ul>
</div>

<script type="text/javascript">
    $("#marquee").marquee();
</script>

其中 MyApp.AppCache.HeadlineNewsText 是預先取好的頭條新聞內容,放在自己寫的 AppCache 快取類別裡面。

從程式碼中引用的 JavaScript 和 CSS 位置可以發現,我是直接把下載的跑馬燈 plugin 解壓縮到網站的 Scripts 目錄下,然後去修改 jquery.marquee/css/jquery.marquee.css 的內容,來達到我想要的顯示樣式,包括跑馬燈顯示的區塊寬高、字型顏色等等。

CSS 內容也貼上來吧:

ul.marquee {
    /* required styles */
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    position: relative;
    overflow: hidden;

    /* optional styles for appearance */
    width: 100%;
    height: 22px; /* height should be included to reserve visual space for the marquee */
/*
    background-color: #f2f2ff;
    border: 1px solid #08084d;
*/    
}

ul.marquee li {
    /* required styles */
    position: absolute;
    top: -999em;
    left: 0;
    display: block;
    white-space: nowrap; /* keep all text on a single line */

    /* optional styles for appearance */
    font-family: "微軟正黑體", Arial;
    font-size: 120%;
    font-weight: 700;
    color: red;
    padding: 3px 5px;
}

下載套件

此 plugin 可到 Giva Labs 官網免費下載,或直接點此連結下載
授權類型:Apache 2.0

儘管此套件的最新版本發布日期是 2009 年,有點年代了,但和 jQuery 2.0 搭配使用是完全沒問題的。

Happy coding!
Copyright © 2012. Huan-Lin 學習筆記 - All Rights Reserved
Powered by Blogger
Template Design by Cool Blogger Tutorials
Published by Templates Doctor