找到一個很好用的跑馬燈 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!
沒有留言: