快捷導(dǎo)航

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

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

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

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

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

復(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)滾動代碼：

復(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> 

您可能感興趣的文章:

相關(guān)文章

JavaScript中的apply()方法和call()方法使用介紹
我們發(fā)現(xiàn)apply()和call()的真正用武之地是能夠擴(kuò)充函數(shù)賴以運(yùn)行的作用域，如果我們想用傳統(tǒng)的方法實(shí)現(xiàn)
2012-07-07
讓任務(wù)管理器中的CPU跳舞的js代碼
下面的代碼就是利用js控制cpu的占有率，實(shí)現(xiàn)時高時低效果
2008-11-11
Whatever:hover 無需javascript讓IE支持豐富偽類
絕大部分現(xiàn)代瀏覽器支持 css 中的 :hover 偽類選擇器，可以用于所有 html 元素。
2010-06-06
javascript實(shí)現(xiàn)在某個元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)在某個元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例,需要的朋友可以參考下
2014-08-08
解決bootstrap-select 動態(tài)加載數(shù)據(jù)不顯示的問題
今天小編就為大家分享一篇解決bootstrap-select 動態(tài)加載數(shù)據(jù)不顯示的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Echarts圖表點(diǎn)擊x軸y軸切換圖表二級數(shù)據(jù)實(shí)例代碼
最近項(xiàng)目用到了Echarts圖進(jìn)行數(shù)據(jù)展示,所以下面這篇文章主要給大家介紹了關(guān)于Echarts圖表點(diǎn)擊x軸y軸切換圖表二級數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
JS中的==運(yùn)算： [''''] == false —>true
這篇文章主要介紹了JS中的==運(yùn)算： [''] == false —>true的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
JS異步任務(wù)的并行、串行及二者結(jié)合用法
讓多個異步任務(wù)按照我們的想法執(zhí)行，是開發(fā)中常見的需求，今天我們就來捋一下，如何讓多個異步任務(wù)并行，串行，以及并行串行相結(jié)合，感興趣的朋友跟隨小編一起看看吧
2023-10-10
TypeScript中interface和type的區(qū)別詳解
本文主要介紹了TypeScript中interface和type的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
javascript自定義右鍵菜單插件
這篇文章主要為大家詳細(xì)介紹了javascript自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12