用javascript實現代替marquee的滾動字幕效果代碼

2019-11-21 01:53:59

字體：大中小

來源：轉載

供稿：網友

由于marquee標簽現在用得是越來越少了，所以滾動效果的做法大多也都改用javascript來實現了
之所以拋棄marquee是因為marquee是一個嚴重影響用戶體驗的東西，你把數十行內容壓縮到幾行滾動的確幫助你壓縮了排版空間，但你有沒有想過用戶可能因為想閱讀其中一兩行的內容而不得不在你這個滾動上等半天？就以經典論壇頁面上部“BlogBeta 數字引擎p4 3.0服務器只要6999元/年”廣告文字右邊的聚合文字滾動為例，你覺得這是一個很好的用戶體驗么？W3C的專家們難道還不如一群無知的小p孩考慮的周全？簡直是笑話
第一種方法：用javascript模擬marquee的做法。
出處：網易游戲

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>熱點新聞</title> <style type="text/css">  </style> </head> <body> <h4>滾動新聞</h4> <script language="JavaScript" type="text/javascript"> var marqueeContent=new Array(); marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用"夢幻密保"快速取回帳號密碼</a>"; marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>網易將軍令官方網站</a>"; marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁紙下載</a>"; marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下載</a>"; var marqueeInterval=new Array(); var marqueeId=0; var marqueeDelay=2000; var marqueeHeight=20; function initMarquee() {     var str=marqueeContent[0];     document.write('<div   class="iwvjtn8m0"   id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(/'startMarquee()/',marqueeDelay)"><div>'+str+'</div></div>');     marqueeId++;     marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); } function startMarquee() {     var str=marqueeContent[marqueeId];     marqueeId++;     if(marqueeId>=marqueeContent.length) marqueeId=0;     if(document.getElementById("marqueeBox").childNodes.length==1) {     var nextLine=document.createElement('DIV');     nextLine.innerHTML=str;     document.getElementById("marqueeBox").appendChild(nextLine);     }     else {         document.getElementById("marqueeBox").childNodes[0].innerHTML=str;         document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);         document.getElementById("marqueeBox").scrollTop=0;     }     clearInterval(marqueeInterval[1]);     marqueeInterval[1]=setInterval("scrollMarquee()",20); } function scrollMarquee() {     document.getElementById("marqueeBox").scrollTop++;     if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){     clearInterval(marqueeInterval[1]);     } } initMarquee(); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

個人觀點：從web可用性角度上講，我們在采用這段代碼的同時要考慮到noscript環境下的可用性，建議將內容還是以下邊代碼的形式出現在頁面中。如：
程序代碼

復制代碼代碼如下:

<div id="newslist">  
<ul>  
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“夢幻密保”快速取回帳號密碼</a></li>  
<li><a href=http://ekey.163.com/ target=_blank>網易將軍令官方網站</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> 

然后用腳本去設置隱藏，將列表項讀進javascript中定義的數組中。即可達到在noscript環境下也能正常看到內容列表。

第二種方法：這個更強，能自動根據內容自動進行左右滾動，解決了寬度太小造成的截取問題。
原文作者：風動人

<html> <head> <title> SCROLL </title> <style type="text/css"> #infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;} #infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;} </style> <script type="text/javascript"> var tc; window.onload=function(){     var o=document.getElementById('infozone');hscroll(o);     window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000); } function scrollup(o,d,c){     if(d==c){         var t=o.firstChild.cloneNode(true);         o.removeChild(o.firstChild);o.appendChild(t);         t.style.marginTop=o.firstChild.style.marginTop='0px';         hscroll(o);     }     else{         ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);         o.firstChild.style.marginTop=-c+l+'px';         window.setTimeout(function(){scrollup(o,d,c-l)},50);     } } function hscroll(o){     var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;     if(w1<=w2)return;     tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500); } function hs(o,d,c,p){     c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';     if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}     else tc=window.setTimeout(function(){hs(o,d,c,p)},5); } </script> </head> <body> <div   class="iwvjtn8m0"   id="infozone"><div>溫嵐 - 屋頂(周杰倫 對唱版)</div><div>范瑋琪 - 那些花兒</div><div>張韶涵 - 娃娃</div><div>孫楠&韓紅 - 美麗的神話</div></div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

個人觀點：從xhtml的語義化的角度看，頁面內容中濫用div標簽現象比較嚴重，可改成ul/li形式。

第三種是最精簡的，代碼非常少。
原文作者：cityvoice
HTML代碼

<!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="http://m.survivalescaperooms.com/"/>    <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="iwvjtn8m0"   id="newslist">          <ul id="contain">              <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>              <li><a href="http:/www.iwcn.net">張信哲 - 白月光</a></li>          </ul>      </div>  <SCRIPT LANGUAGE="JavaScript">  function xx(){  var container=document.getElementById("contain");  container.appendChild(container.firstChild);  }  setInterval("xx()",3000);  </SCRIPT>   </BODY>  </HTML>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

個人觀點：太短小精干了，如果你喜歡簡單的話，這個也可以考慮的。

上一篇：用javascript實現改善用戶體驗之alert提示效果

下一篇：用javascript實現div可編輯的常見方法