找到一個很好用的跑馬燈 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 原始碼如下:
其中 MyApp.AppCache.HeadlineNewsText 是預先取好的頭條新聞內容,放在自己寫的 AppCache 快取類別裡面。
從程式碼中引用的 JavaScript 和 CSS 位置可以發現,我是直接把下載的跑馬燈 plugin 解壓縮到網站的 Scripts 目錄下,然後去修改 jquery.marquee/css/jquery.marquee.css 的內容,來達到我想要的顯示樣式,包括跑馬燈顯示的區塊寬高、字型顏色等等。
CSS 內容也貼上來吧:
下載套件
此 plugin 可到 Giva Labs 官網免費下載,或直接點此連結下載。
授權類型:Apache 2.0
儘管此套件的最新版本發布日期是 2009 年,有點年代了,但和 jQuery 2.0 搭配使用是完全沒問題的。
Happy coding!
關於這個好用的 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!
沒有留言: