溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html+css+javascript實現(xiàn)列表循環(huán)滾動的方法

發(fā)布時間：2020-09-28 16:27:01 來源：億速云 閱讀：209 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)html+css+javascript實現(xiàn)列表循環(huán)滾動的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

說明：設(shè)置時間定時，在規(guī)定的時間內(nèi)替換前一個節(jié)點(diǎn)的內(nèi)容
1、關(guān)鍵代碼：javascript： 

<script type="text/javascript"> 
var dome=document.getElementById("dome"); //獲取節(jié)點(diǎn) 
var dome1=document.getElementById("dome1"); 
var dome2=document.getElementById("dome2"); 
var speed=50;//設(shè)置向上輪動的速度 
dome2.innerHTML=dome1.innerHTML;//復(fù)制節(jié)點(diǎn) 關(guān)鍵語句 
function moveTop(){ 
if(dome1.offsetHeight-dome.scrollTop<=0){//判斷內(nèi)容第一次是否循環(huán)完了 
dome.scrollTop=0; 
}else{ 
dome.scrollTop++;//否則上移 
} 
} 
var myFunction=setInterval("moveTop()",speed);//設(shè)置時間定時 
dome.onmouseover=function(){//鼠標(biāo)放在區(qū)域內(nèi)停止 
clearInterval(myFunction); 
} 
dome.onmouseout=function(){ 
myFunction=setInterval(moveTop,speed); 
} 
</script>


2、代碼示例：完整代碼(可運(yùn)行) 

<!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=utf-8" /> 
<title>循環(huán)滾動信息欄</title> 
<style type="text/css"> 
body{ 
margin:0px; 
padding:0px; 
} 
#express li{ 
height:25px; 
border-bottom:dashed 1px #999; 
line-height:20px; 
font-size:12px; 
list-style:none; 
} 
#dome{ 
height:305px; 
overflow:hidden; 
margin-top:0px; 
} 
#book_class{ 
width:200px; 
height:310px; 
border:3px solid #999; 
margin-left:auto; 
margin-right:auto; 
margin-top:70px; 
border-radius:5px 5px 5px 5px; 
box-shadow:0px 0px 10px 10px #CECED1; 
} 
#express{ 
margin-left:-30px; 
margin-right:10px; 
margin-bottom:0px; 
margin-top:0px; 
} 
#book_class div div ul li a{ 
text-decoration:none; 
color:#333333; 
} 
#book_class div div ul li a:hover{ 
text-decoration:underline; 
} 
</style> 
</head> 
<body> 
<div id="book_class"> 
<div id="dome"> 
<div id="dome1"> 
<ul id="express"> 
<li><a href="#">·2010考研英語大綱到貨75折...</a></li> 
<li><a href="#">·權(quán)威定本四大名著（人民文...</a></li> 
<li><a href="#">·口述歷史權(quán)威唐德剛先生國...</a></li> 
<li><a href="#">·袁偉民與體壇風(fēng)云：實話實...</a></li> 
<li><a href="#">·我們臺灣這些年：轟動兩岸...</a></li> 
<li><a href="#">·暢銷教輔推薦：精品套書50...</a></li> 
<li><a href="#">·2010版法律碩士聯(lián)考大綱75...</a></li> 
<li><a href="#">·計算機(jī)新書暢銷書75折搶購</a></li> 
<li><a href="#">·2009年孩子最喜歡的書</a></li> 
<li><a href="#">·弗洛伊德作品精選集59折</a></li> 
<!---------多復(fù)制<li>標(biāo)簽就行了------這里就不多寫了----------> 
</div> 
<div id="dome2"></div> 
</div> 
</div> 
<!----------防止html沒有加載完，把javascript代碼寫在下面----------> 
<script type="text/javascript"> 
var dome=document.getElementById("dome"); 
var dome1=document.getElementById("dome1"); 
var dome2=document.getElementById("dome2"); 
var speed=50;//設(shè)置向上輪動的速度 
dome2.innerHTML=dome1.innerHTML;//復(fù)制節(jié)點(diǎn) 
function moveTop(){ 
if(dome1.offsetHeight-dome.scrollTop<=0){ 
dome.scrollTop=0; 
}else{ 
dome.scrollTop++; 
} 
} 
var myFunction=setInterval("moveTop()",speed); 
dome.onmouseover=function(){ 
clearInterval(myFunction); 
} 
dome.onmouseout=function(){ 
myFunction=setInterval(moveTop,speed); 
} 
</script> 
</body> 
</html>

感謝各位的閱讀！關(guān)于html+css+javascript實現(xiàn)列表循環(huán)滾動的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手