符合WEB標準的滾動文字特效的實現(xiàn)方法_Web標準教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      



      由于marquee標簽現(xiàn)在用得是越來越少了，所以滾動效果的做法大多也都改用javascript來實現(xiàn)了，至于不明白為什么不直接用marquee標簽的朋友，不妨先閱讀一下這篇文章。  
      


      用javascript模擬marquee的做法。  
      


      


      

    

        
      

            以下為引用的內(nèi)容：
      

            
      <!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>熱點新聞mb5u.com</title>
      <style type="text/css">
      <!--
      body {
       margin: 0px;
       font-size: 12px;
       color: #938C43;
       line-height: 150%;
       text-align:center;
      }
      a:link{color: #9D943A;font-size:12px;} 
       
      a:hover{color: #FF3300;font-size:12px;}
      a:visited{color: #9D943A;font-size:12px;}
      a.red:link{color: #ff0000;font-size:12px;}
      a.red:hover{color: #ff0000;font-size:12px;}
      a.red:visited{color: #ff0000;font-size:12px;}
      #marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}
      -->
      </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>網(wǎng)易將軍令官方網(wǎng)站</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 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]);
       }
      }
      initMarq<div><font color=#999999 title="第一頁"><font face="webdings">9</font></font> 
      <font color=#999999 title="上十頁"><font face="webdings">7</font></font> 
      <font color=#999999 title="上一頁"><font face="webdings">3</font></font> 
      <b>1</b>
      <a href="./142220269IF5J4C4E387110_2.html">2</a>
      <a href="./142220269IF5J4C4E387110_3.html">3</a>
       <a href="./142220269IF5J4C4E387110_2.html" title="下一頁"><font face="webdings">4</font></a> 
       <font color=#999999  title="下十頁"><font face="webdings">8</font></font>   
      <a href="./142220269IF5J4C4E387110_3.html" title="尾頁"><font face="webdings">:</font></a>
      </div></div> 
       
      

            
      <div class="ad_613x60"><a href="Http://www.qkeer.com/" rel="external">
        <img src="http://www.qkeer.com/templets/image/banner468x60.gif" /></a></div>  
      

            
      <div class="art_detail_now">您正在閱讀文章： 
       <span>符合WEB標準的滾動文字特效的實現(xiàn)方法</span><br />
       ● 要害詞： 
       <span>
        
      <script language="javascript" src="/ad/adnav.js"></script></span><br />
       上一篇：<label id="PrevPage_9IF5J4C4E387110"></label><script language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id=9IF5J4C4E387110&Type=NS&PageType=PrevPage"></script><br />
       下一篇：<label id="NextPage_9IF5J4C4E387110"></label><script language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id=9IF5J4C4E387110&Type=NS&PageType=NextPage"></script></div>
      <div class="art_detail_list">
      <span>相關(guān)文章</span> 
       
      

            
      <ul>  
      

            

      <li><a href="/Design/w3c/1623584026185I9KAFFJCCG.html">大型Web2.0站點構(gòu)建技術(shù)初探</a> 2007-10-16</li>  
      

            
      <li><a href="/Design/w3c/142225888I21I6FFC808716.html">網(wǎng)頁設(shè)計文字大小相關(guān)的四種設(shè)置方法</a> 2007-10-14</li>  
      

            
      <li><a href="/Design/w3c/142224258035241B9KH76II.html">網(wǎng)頁設(shè)計并非所有內(nèi)容都必須要DIV做“容器”</a> 2007-10-14</li>  
      

            
      <li><a href="/Design/w3c/142222952EAH1AAG8J73G9I.html">解決IE7以下版本不支持無A狀態(tài)偽類的幾種方法</a> 2007-10-14</li>  
      

            
      <li><a href="/Design/w3c/14222022KII5I8FFEFGBBEH.html">距離北京2008年奧運會開幕的倒記時特效，簡單的演示一下！</a> 2007-10-14</li> 
       
      

            
      <li><a href="/Design/w3c/42424628G7K05J96984BB.html">自定義網(wǎng)頁超鏈接下劃線的CSS代碼</a> 2007-10-04</li>
      </ul>
      </div>
      </div>
      <div class="r">
      <div class="nav">
      <div class="nav_title">
      <div id="n1">268站長知識庫</div>
      </div>
      <div class="nav_list">
      <ul>
        <li><a href="http://www.cz268.com.cn/Design/Pages/">網(wǎng)頁</a> </li>
        <li><a href="http://www.cz268.com.cn/Design/Edit/">編程</a> </li>
        <li><a href="http://www.cz268.com.cn/Webbiz/Seo/">優(yōu)化</a> </li>
        <li><a href="http://www.cz268.com.cn/Webbiz/Pormot/">推廣</a> </li>
        <li><a href="http://www.cz268.com.cn/Webbiz/Blog/">博客</a> </li>  
        <li><a href="http://www.cz268.com.cn/Design/w3c/">WEB標準</a> </li>
        <li><a href="http://www.cz268.com.cn/Webmaster/RecSite/">酷站</a> </li>
        <li><a href="http://www.cz268.com.cn/Webbiz/Exp/">經(jīng)驗</a> </li>
        <li><a href="http://www.cz268.com.cn/Webbiz/Free/">資源</a> </li>
        <li><a href="http://www.cz268.com.cn/Webmaster/Reading/">必讀</a> </li>
        <li><a href="http://www.cz268.com.cn/Server/">服務(wù)器</a> </li>
        <li><a href="http://www.cz268.com.cn/cms/">CMS建站</a> </li>
      </ul></div>
      <div class="nav_title">
      <div id="n2">站長網(wǎng)業(yè)內(nèi)相關(guān)</div>
      </div>
      <div class="nav_list">
      <ul>
        <li><a href="http://www.cz268.com.cn/article/p1/14.html">業(yè)界</a> </li> 
       
        <li><a href="http://www.cz268.com.cn/article/p1/15.html">融資</a> </li>
        <li><a href="http://www.cz268.com.cn/article/p1/16.html">門戶</a> </li>
        <li><a href="http://www.cz268.com.cn/article/p1/17.html">搜索</a> </li>
        <li><a href="http://www.cz268.com.cn/article/p1/19.html">商務(wù)</a> </li>
        <li><a href="http://www.cz268.com.cn/article/p1/18.html">開發(fā) </a> </li></ul></div>
      <div class="nav_title">
      <div id="n3">站長網(wǎng)聯(lián)盟資訊</div>
      </div>
      <div class="nav_list">
      <ul>
        <li><a href="http://www.cz268.com.cn/Union/News/">聯(lián)盟</a> </li>
        <li><a href="http://www.cz268.com.cn/Union/Intro/">介紹 </a> </li>
        <li><a href="http://www.cz268.com.cn/Union/Comment/">點評</a> </li> 
       
        <li><a href="http://www.cz268.com.cn/Union/Skill/">技巧</a> </li>
        <li><a href="http://www.cz268.com.cn/Union/">聯(lián)盟雜談</a> </li></ul></div>
      <div class="nav_title">
      <div id="n4">站長網(wǎng)常用工具</div></div>
      <div class="nav_list">
      <ul>
        <li><a href="http://www.cz268.com.cn/Tool/Alexa/">Alexa</a> </li>
        <li><a href="http://www.cz268.com.cn/Tool/IP/">IP</a> </li>
        <li><a href="http://www.cz268.com.cn/Tool/Whois/">WHOIS</a>  </li>
        <li><a href="http://www.cz268.com.cn/Tool/PR/">PR</a> </li>
        <li><a href="http://www.cz268.com.cn/Tool/Meta/">MEAT</a> </li>
        <li><a  href="http://www.cz268.com.cn/Tool/Key/">要害詞</a></li></ul></div></div>  
      <div class="ad_300x250">
      <script type="text/javascript"><!--
      google_ad_client = "pub-8464933448352541";
      google_ad_width = 300;
      google_ad_height = 250;
      google_ad_format = "300x250_as";
      google_ad_type = "image";
      //2007-08-10: Http://www.cz268.com.cn
      google_ad_channel = "3774858981";
      google_color_border = "191919";
      google_color_bg = "FFFFFF";
      google_color_link = "0066CC";
      google_color_text = "000000";
      google_color_url = "32527A";
      //-->
      </script>
      <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
      </script>
      </div>  
      

            
      <div class="mba_title">『熱門文章』 
        <span>268站長網(wǎng)</span></div>  
      

            

      <div class="border mba ">  
      

            
       <ul>  
      

            
        <li><a title="64位Web服務(wù)器安裝配置注重事項" href="/Server/Web/4137C923K9KAH60B5CIK6.html" rel="external">64位Web服務(wù)器安裝配置注重事項..</a></li>
        <li><a title="徐靜蕾：站長們，大家懂炒作嗎？" href="/News/IT/192134JB90KE4B655BH2AJ0.html" rel="external">徐靜蕾：站長們，大家懂炒作嗎？..</a></li>
        <li><a title="申請Google Adsense賺錢準則" href="/Union/Skill/9164326D9ECBA8J5BI0D99.html" rel="external">申請Google Adsense賺錢準則..</a></li>
        <li><a title="博客的營銷 想說愛你不輕易" href="/Webbiz/Blog/412787AJ1IA91239A1F8D.html" rel="external">博客的營銷 想說愛你不輕易..</a></li>
        <li><a title="符合XHTML標準DIV CSS布局的網(wǎng)站對SEO的影響 " href="/Webbiz/Exp/18299H53K4407DDK1K6JA.html" rel="external">符合XHTML標準DIV CSS布局的網(wǎng)站對SE..</a></li>  
        <li><a title="我們怎樣寫軟文誘騙點擊量的上升!" href="/Webbiz/Pormot/31429J1AC36GA779F380KF.html" rel="external">我們怎樣寫軟文誘騙點擊量的上升!..</a></li>
        <li><a title="注重：新網(wǎng)互聯(lián)的域名，你只有使用權(quán)！ " href="/News/IT/3101584H84FGI21K0F4HI2.html" rel="external">注重：新網(wǎng)互聯(lián)的域名，你只有使用權(quán)..</a></li>
        <li><a title="國內(nèi)備案難，轉(zhuǎn)移國外空間的基本常識" href="/News/IT/27151C4C6HF6G1540EE67E.html" rel="external">國內(nèi)備案難，轉(zhuǎn)移國外空間的基本常識..</a></li>
        <li><a title="打造地方門戶站點全功略 超級SEO優(yōu)化給你全面分析" href="/Webbiz/Seo/7335242704F1BI101D8FI.html" rel="external">打造地方門戶站點全功略 超級SEO優(yōu)化..</a></li>
        <li><a title="經(jīng)典話題十問十答 助你提高網(wǎng)上的成交率" href="/Webmaster/Reading/232917D5H6JID4CH06IG6.html" rel="external">經(jīng)典話題十問十答 助你提高網(wǎng)上的成交..</a></li> 
       
       </ul>
      </div>  
      

            

      <div class="ad_125x125">
      <script type="text/javascript"><!--
      google_ad_client = "pub-8464933448352541";
      google_ad_width = 120;
      google_ad_height = 60;
      google_ad_format = "120x60_as_rimg";
      google_cpa_choice = "CAEQxIjL9gEaCJHH53FOqPVZKITT6n4";
      //-->
      </script>
      <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
      </script>
        
      <script type="text/javascript"><!--
      google_ad_client = "pub-8464933448352541";
      google_ad_width = 120;
      google_ad_height = 60;
      google_ad_format = "120x60_as_rimg";
      google_cpa_choice = "CAEQy6OdzgEaCC8eN93A557iKLHM93M";
      //-->
      </script>
      <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
      </script> 
       
       </div>
      <div class="border sideart">
      <div class="border_title sideart_title">『<a 
      href="http://www.cz268.com.cn/cms/">草根站長CMS學堂</a>』268站長網(wǎng)</div>  
      

            
      <div class="sideart_content">  
      

            
       <ul>  
      

            
        <li><a title="讓風訊顯示所有系統(tǒng)字體的代碼" href="/cms/foosun/13225022H3IGA159AD9B2KK.html" rel="external">讓風訊顯示所有系統(tǒng)字體的代碼..</a></li>
        <li><a title="為風訊推薦新聞和熱點新聞添加標識性文字或圖片" href="/cms/foosun/132248778HC517G03K5I4BC.html" rel="external"><font color="#CC0000">為風訊推薦新聞和熱點新聞添加標識性文字或</font>..</a></li>
        <li><a title="圖片、數(shù)字可選擇自動顯示列表順序1,2,3的功能" href="/cms/foosun/132244870DIA50I5JA5I304.html" rel="external">圖片、數(shù)字可選擇自動顯示列表順序1,2,3的功..</a></li>
        <li><a title="Foosun 4.0實現(xiàn)網(wǎng)易clickeye功能" href="/cms/foosun/13224377846G00GHAHKFDA6.html" rel="external">Foosun 4.0實現(xiàn)網(wǎng)易clickeye功能..</a></li>
        <li><a title="風訊sp2發(fā)布特推出論壇工具" href="/cms/foosun/13224299B01I2DC9CIK4AE6.html" rel="external">風訊sp2發(fā)布特推出論壇工具..</a></li>  
        <li><a title="風訊FS4.0增加圖片防盜鏈功能" href="/cms/foosun/1322413718G1DAA95JG2JI4.html" rel="external"><font color="#CC0000">風訊FS4.0增加圖片防盜鏈功能</font>..</a></li>
        <li><a title="風訊DIV CSS做兩列新聞列表分欄的方法" href="/cms/foosun/13224036HKICIB1BE9K64G5.html" rel="external">風訊DIV CSS做兩列新聞列表分欄的方法..</a></li>
        <li><a title="提供風訊4.0系統(tǒng)會員日志模板6套" href="/cms/foosun/13223694732D9E863FH8C82.html" rel="external">提供風訊4.0系統(tǒng)會員日志模板6套..</a></li>
        <li><a title="風訊畫中畫實現(xiàn)調(diào)用google廣告的方法" href="/cms/foosun/132234842AJAI5GD75C140K.html" rel="external">風訊畫中畫實現(xiàn)調(diào)用google廣告的方法..</a></li>
        <li><a title="為會員系統(tǒng)增加“你有新短消息，請注重查收”語音提示功能" href="/cms/foosun/132233141FHK3C9HA1GC34K.html" rel="external">為會員系統(tǒng)增加“你有新短消息，請注重查收..</a></li>  
       </ul>
      </div>  
      

            
        </div></div>
      <DIV class="border links"><SPAN>友情鏈接</SPAN>
      <DIV class="border_content links_content"> <table width="100%" border="0" cellspacing="1" cellpadding="3">
       <tr>
         <td width="10%" align="center" valign="meddle"><a href="http://www.qkeer.com"  target="_blank">Q客網(wǎng)</a></td>
        <td width="10%" align="center" valign="meddle"><a href="http://www.ip180.com"  target="_blank">IP180常用查詢</a></td>
        <td width="10%" align="center" valign="meddle"><a href="http://www.jc286.com"  target="_blank">jc286教程網(wǎng)</a></td>
        <td width="10%" align="center" valign="meddle"><a href="http://www.21seo.cn"  target="_blank">SEO優(yōu)化部落</a></td>  
        <td width="10%" align="center" valign="meddle"><a href="http://www.51w3c.com"  target="_blank">網(wǎng)頁標準協(xié)會</a></td>
        <td width="10%" align="center" valign="meddle"><a href="http://www.cz268.com.cn"  target="_blank">268站長網(wǎng)</a></td> 
       
      

            
       </tr>
      </table></DIV>
      </DIV>
      <div class="footer"><a href="http://www.cz268.com.cn/">268站長網(wǎng)首頁</a> | <a href="http://www.cz268.com.cn/Webbiz">網(wǎng)站運作</a> | <a href="http://www.cz268.com.cn/News">業(yè)界新聞 </a>  | <a href="http://www.cz268.com.cn/Union">聯(lián)盟資訊 </a>  | <a href="http://www.cz268.com.cn/Design">站長學院 </a> | <a href="http://www.cz268.com.cn/Webmaster">站長在線</a> | <a href="http://www.cz268.com.cn/tool">站長工具</a> | <a href="http://www.cz268.com.cn/cms">CMS專區(qū)</a> | <a href="http://www.cz268.com.cn/Server">服務(wù)器區(qū)</a>| <a href="http://www.cz268.com.cn/sitemap">網(wǎng)站地圖</a><br />
      <a 
      href="http://www.cz268.com.cn/">www.cz268.com.cn</a> © 2006-2008 版權(quán)所有 268站長網(wǎng)  <img   
      id="copyright" src="/templets/files/ico_bg.gif" /><a href="http://www.miibeian.gov.cn/" 
      rel="external">京ICP備案中</a> Powered by QQ469502097 
      <script src='http://s116.cnzz.com/stat.php?id=470833&web_id=470833' language='JavaScript' charset='gb2312'></script><br />本站信息來自互聯(lián)網(wǎng)_可供參考不能作為真實依據(jù)，另本站如有轉(zhuǎn)載或引用文章涉及版權(quán)問題_請速與我們聯(lián)系</div>
      <noscript><iframe src="*.html"></iframe></noscript>   
      </body></html> 
       
      

                  		

        
      

          


      

  
      


      

      



      


      來源：模板無憂//所屬分類：Web標準教程/更新時間：2007-11-12


      

      



      


      



      相關(guān)Web標準教程：