快捷導(dǎo)航

用javascript代替marquee的滾動(dòng)字幕效果代碼

更新時(shí)間：2007年04月30日 00:00:00 作者：

由于marquee標(biāo)簽現(xiàn)在用得是越來(lái)越少了，所以滾動(dòng)效果的做法大多也都改用javascript來(lái)實(shí)現(xiàn)了，至于不明白為什么不直接用marquee標(biāo)簽的朋友，不妨先閱讀一下這篇文章。
第一種方法：用javascript模擬marquee的做法。
出處：網(wǎng)易游戲

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

個(gè)人觀點(diǎn)：從web可用性角度上講，我們?cè)诓捎眠@段代碼的同時(shí)要考慮到noscript環(huán)境下的可用性，建議將內(nèi)容還是以下邊代碼的形式出現(xiàn)在頁(yè)面中。如：

復(fù)制代碼代碼如下:

<div id="newslist"> 
<ul> 
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“夢(mèng)幻密?！笨焖偃』貛ぬ?hào)密碼</a></li> 
<li><a href=http://ekey.163.com/ target=_blank>網(wǎng)易將軍令官方網(wǎng)站</a></li> 
<li><a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁紙下載</a></li> 
<li><a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下載</a></li> 
</ul> 
</div>

然后用腳本去設(shè)置隱藏，將列表項(xiàng)讀進(jìn)javascript中定義的數(shù)組中。即可達(dá)到在noscript環(huán)境下也能正常看到內(nèi)容列表。
第二種方法：這個(gè)更強(qiáng)，能自動(dòng)根據(jù)內(nèi)容自動(dòng)進(jìn)行左右滾動(dòng)，解決了寬度太小造成的截取問(wèn)題。
原文作者：風(fēng)動(dòng)人

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

個(gè)人觀點(diǎn)：從xhtml的語(yǔ)義化的角度看，頁(yè)面內(nèi)容中濫用div標(biāo)簽現(xiàn)象比較嚴(yán)重，可改成ul/li形式。

第三種是最精簡(jiǎn)的，代碼非常少。
原文作者：cityvoice

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> New Document </TITLE>   <META NAME="Generator" CONTENT="EditPlus">   <META NAME="Author" CONTENT="">   <META NAME="Keywords" CONTENT="">   <META NAME="Description" CONTENT="">   <style type="text/css">     #newslist{         background:#f7f7f7;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px;     }     #contain{         font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0;     }     #contain li{         height:20px;line-height:20px;white-space:nowrap;overflow:hidden;     } </style>  </HEAD>  <BODY>     <div   class="wppm3vysvbp"   id="newslist">         <ul id="contain">             <li><a href="http:/www.iwcn.net">溫嵐 - 屋頂(左右擺動(dòng))</a></li>             <li><a href="http:/www.iwcn.net">范瑋琪 - 那些花兒</a></li>             <li><a href="http:/www.iwcn.net">張韶涵 - 娃娃</a></li>             <li><a href="http:/www.iwcn.net">孫楠&韓紅 - 美麗的神話</a></li>             <li><a href="http:/www.iwcn.net">張信哲 - 白月光</a></li>         </ul>     </div>   </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

個(gè)人觀點(diǎn)：太短小精干了，如果你喜歡簡(jiǎn)單的話，這個(gè)也可以考慮的。

您可能感興趣的文章: