Javascript 仿歌詞智能滾動(dòng)代碼

更新時(shí)間：2009年10月18日 22:41:41 作者：

為什么說(shuō)它是智能滾動(dòng)呢？因?yàn)槿绻覀冊(cè)诓季志W(wǎng)頁(yè)的時(shí)候，預(yù)留的滾動(dòng)區(qū)域太小的話，有可能文字會(huì)有一部分看不到，本款代碼可以智能判斷區(qū)域大小，如果不夠顯示文字，那么它會(huì)控制文字做相應(yīng)的左右滾動(dòng).

保證瀏覽者能看清楚文字，然后繼續(xù)上下滾動(dòng)。

<html> <head> <title>文本滾動(dòng)</title> <style type="text/css"> #infozone{font-size:12px;color:#aa6;overflow:hidden;width:98px;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);},8000); } 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="8qukysg"   id="infozone"><div>青花瓷（周杰倫）</div><div>一生有你（水木年華）</div><div>神話（孫楠、韓紅）</div> </body> </html>

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

您可能感興趣的文章:

相關(guān)文章

JS旋轉(zhuǎn)的彩色文字輪轉(zhuǎn)特效
JavaScript完成的文字效果，不停旋轉(zhuǎn)的文字特效，給旋轉(zhuǎn)到當(dāng)前的文字增加炫麗的彩色效果，還行吧，偶比較喜歡的效果，里面的很多參數(shù)都是可調(diào)的。
2009-11-11
javascript 灑脫飄動(dòng)的文字
飄動(dòng)的文字，看著還挺自在、灑脫，網(wǎng)上經(jīng)常見(jiàn)的東西，原來(lái)是這么實(shí)現(xiàn)的，奉獻(xiàn)給大家哦。
2009-10-10
文字在網(wǎng)頁(yè)上下浮動(dòng) 學(xué)習(xí)可以不建議用
JavaScript控制文字像跳跳球一樣在網(wǎng)頁(yè)上浮動(dòng)，碰到邊緣自動(dòng)回來(lái)，有興趣看一下。
2009-11-11
javascript 打字效果的文字特效
文字如何實(shí)現(xiàn)打字的效果呢?在瀏覽網(wǎng)頁(yè)的時(shí)候也經(jīng)常能看到這種效果。本節(jié)給出了一個(gè)打字效果的文字特效，文字一個(gè)一個(gè)地打印在頁(yè)面上。
2011-01-01
javascript 模擬Marquee文字向左均勻滾動(dòng)代碼
Marquee是HTML語(yǔ)言里固有的文字滾動(dòng)標(biāo)簽，雖然用著方便，但是功能上有一些限制，很多時(shí)候我們都是通過(guò)JavaScript來(lái)補(bǔ)充這一功能.
2009-10-10
JavaScript 平滑文字閃爍
基于JavaScript的平滑文字閃爍,不是單純的閃爍,貌似還帶有一點(diǎn)點(diǎn)別的效果,比如淡入/淡出,那些顏色值你是可以變的,改成你想要的,還有閃爍間隔等,都可以修改的.
2009-10-10
Js+CSS實(shí)現(xiàn)的間斷和不間斷文本滾動(dòng)代碼
Js+CSS間斷和不間斷文本滾動(dòng)代碼，文字在一行高度范圍內(nèi)不間斷滾動(dòng)，還有一個(gè)是間斷滾動(dòng)，滾動(dòng)一次后會(huì)稍停片刻再次滾動(dòng)。
2010-10-10
javascript 網(wǎng)頁(yè)上跳動(dòng)的文字
網(wǎng)頁(yè)上跳動(dòng)的文字，代碼稍復(fù)雜，效果挺可愛(ài)的，一跳一跳的文字，真逗人！
2009-10-10
javascript 實(shí)用的文字鏈提示框效果
鼠標(biāo)滑過(guò)文章中的鏈接文字，要在相應(yīng)位置彈出提示框，提示框的樣式由css來(lái)控制，高度自適應(yīng)；鼠標(biāo)可以點(diǎn)擊提示框的中的鏈接,滑離提示框時(shí)，框自動(dòng)消失
2010-06-06
不一樣的文字閃爍輪番閃爍
這是一個(gè)文字閃爍效果，不同的是它是由兩組文字組成，在閃爍的過(guò)程中可以重復(fù)切換，代碼中的speed指定字體閃爍的頻率，可以把引號(hào)內(nèi)的內(nèi)容換成你想要的文字，要記住一定要在body中加上onload語(yǔ)句，否則會(huì)無(wú)效哦。
2009-11-11