快捷導(dǎo)航

兼容IE和Firefox火狐的上下、左右循環(huán)無間斷滾動(dòng)JS代碼

更新時(shí)間：2013年04月19日 16:42:55 作者：

html里的marqueen也能實(shí)現(xiàn)內(nèi)容的滾動(dòng)，但滾動(dòng)是間斷的，運(yùn)用JavaScript可以使這一問題得到改觀，實(shí)現(xiàn)無間斷的滾動(dòng),讓頁面看起來更美觀

html里的marqueen也能實(shí)現(xiàn)內(nèi)容的滾動(dòng)，但滾動(dòng)是間斷的，在滾動(dòng)一個(gè)周期中，會有一段空白出現(xiàn)。如果滾動(dòng)的區(qū)域比較大，空間的出現(xiàn)，會讓頁面看起來很不美觀。運(yùn)用JavaScript可以使這一問題得到改觀，實(shí)現(xiàn)無間斷的滾動(dòng)。

上下循環(huán)滾動(dòng)代碼：

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

 
<div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,30)" style="overflow:hidden; height:60px"> 
<div id="demo1"> 
111111111111111<br> 
222222222222222<br> 
333333333333333<br> 
444444444444444<br> 
555555555555555 
</div> 
<div id="demo2"></div> 
</div> 
<script> 
var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show"); 
var inter; 
t2.innerHTML=t1.innerHTML; 
function qswhMarquee(){ 
if(t2.offsetTop<=t.scrollTop) 
t.scrollTop-=t1.offsetHeight; 
else 
t.scrollTop++; 
} 
inter=setInterval(qswhMarquee,30); 
function getid(id){ 
return document.getElementById(id); 
} 
</script> 

文字左右循環(huán)滾動(dòng)代碼：

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

 
<style type="text/css" media="all"> 
.d1{ 
margin:10px auto; 
width:200px; 
background-color:#CCCCCC; 
height:20px; 
overflow:hidden; 
white-space:nowrap; 
} 
.d2{ 
margin:0px auto; 
background-color:#FF9933; 
} 
.div2{ 
width:auto; 
height:20px; 
font-size:12px; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
var s,s2,s3,s4,timer,i=0; 
function init(){ 
s=getid("div1"); 
s2=getid("div2"); 
s3=getid("div3"); 
s4=getid("div4"); 
s4.innerHTML=s3.innerHTML; 
s2.style.width=s.offsetWidth+"px"; 
s2.style.height=s.offsetHeight+"px"; 
timer=setInterval(mar,30) 
} 
function mar(){ 
//s2.innerHTML=s.scrollLeft; 
if(s3.offsetWidth<=s.scrollLeft){ 
s.scrollLeft-=s3.offsetWidth; 
}else{s.scrollLeft++;} 
} 
function getid(id){ 
return document.getElementById(id); 
} 
window.onload=init; 
</script> 
<div class="d1" id="div1"> 
<span class="div2" id="div3"> 余志國網(wǎng)站設(shè)計(jì)工作室提供專業(yè)的外貿(mào)網(wǎng)站建站服務(wù)。</span> 
<span id="div4" class="div2"></span> 
</div> 
<div class="d2" id="div2"></div> 