javascript 文字上下間隔滾動的代碼符合WEB標(biāo)準(zhǔn) 腳本之家修正版

更新時間：2009年12月09日 05:30:24 作者：

javascript 文字上下間隔滾動的代碼符合WEB標(biāo)準(zhǔn) 腳本之家修正版，這里提供了兩個版本，第二個在firefox下運行有些問題大家可以修改下，第一個的高度問題，已經(jīng)修正，其實就是簡單的加了css樣式。

第一個文字上下間隔滾動修正版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>符合WEB標(biāo)準(zhǔn)的文字間隔滾動JS代碼</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style></head> <body> <script> var marqueeContent=new Array(); //滾動新聞 marqueeContent[0]='<font color="#0000CC">14:25 </font><a href="http://www.dhdzp.com/tools/html-js.htm" target="_blank">HTML/JS互相轉(zhuǎn)換工具-IE7兼容版</a>'; marqueeContent[1]='<font color="#0000CC">14:25 </font><a href="http://www.dhdzp.com/tools/cssyasuo.shtml" target="_blank">css 在線壓縮工具</a>'; marqueeContent[2]='<font color="#0000CC">14:25 </font><a href="http://www.dhdzp.com/csstidy/css_optimiser.php?lang=zh" target="_blank">CSS整形與最佳化工具[壓縮] </a>'; marqueeContent[3]='<font color="#0000CC">14:25 </font><a href="http://www.dhdzp.com/tools/jsmin/index.htm" target="_blank">JS Minifier js壓縮</a>'; var marqueeInterval=new Array(); //定義一些常用而且要經(jīng)常用到的變量 var marqueeId=0; var marqueeDelay=2000; //更新時間,毫秒 var marqueeHeight=18; //容器高度 //接下來的是定義一些要使用到的函數(shù) function initMarquee() { var str=marqueeContent[0]; document.write('<div   class="hq7xspy"   id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px;line-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需再刷新一下頁面才能執(zhí)行]

第二個firefox下運行有些問題。但學(xué)習(xí)js的朋友可以看下主要是看思路。

<!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>JS文字間隔性滾動代碼_適合做公告</title> <meta name="keywords" content="文字滾動,間隔滾動,文字上翻,JS代碼" /> <meta name="description" content="JS實現(xiàn)文字間隔性滾動效果，適合做公告。" /> <style type="text/css">  </style> </head> <body> <div   class="zoh72eq"   id="shangfan"> <div   class="0n22nqt"   id="holder"> <ul> <li><a href="http://www.dhdzp.com/tools/packer.htm" target="_blank">packer_至強的javascript在線加密工具</a></li> <li><a href="http://www.dhdzp.com/tools/bihe/index.htm" target="_blank">XHTML 代碼嵌套查看工具[標(biāo)簽閉合]</a></li> <li><a href="http://www.dhdzp.com/tools/jinzhi.htm" target="_blank">腳本之家 在線進(jìn)制轉(zhuǎn)換 可以實現(xiàn)各類進(jìn)制間</a></li> <li><a href="http://www.dhdzp.com/tools/js_Debug.htm" target="_blank">在線JS腳本校驗器檢測js錯誤 </a></li> <li><a href="http://www.dhdzp.com/tools/htmlto.htm" target="_blank">將html轉(zhuǎn)換為php,javascript和asp的在線工具</a></li> </ul></div> </div> <script type="text/javascript"> function marquee(height,speed,delay){ var scrollT; var pause = false; var ScrollBox = document.getElementById("shangfan"); if(document.getElementById("holder").offsetHeight <= height) return; var _tmp = ScrollBox.innerHTML.replace('holder', 'holder2') ScrollBox.innerHTML += _tmp; ScrollBox.onmouseover = function(){pause = true} ScrollBox.onmouseout = function(){pause = false} ScrollBox.scrollTop = 0; function start(){ scrollT = setInterval(scrolling,speed); if(!pause) ScrollBox.scrollTop += 2; } function scrolling(){ if(ScrollBox.scrollTop % height != 0){ ScrollBox.scrollTop += 2; if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0; } else{ clearInterval(scrollT); setTimeout(start,delay); } } setTimeout(start,delay); } marquee(24,30,3000); </script> </body> </html>

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

您可能感興趣的文章: