Contoh kod untuk melaksanakan tatal ke atas yang lancar bagi senarai berita berdasarkan kemahiran JS

Contoh kod untuk melaksanakan tatal ke atas yang lancar bagi senarai berita berdasarkan kemahiran JS_javascript

WBOY

Lepaskan： 2016-05-16 15:18:53

asal

1217 orang telah melayarinya

Apabila terdapat banyak berita dan ia adalah terhad sebelum ini, menggunakan tatal adalah pilihan yang baik Bab ini akan memperkenalkan cara untuk mencapai kesan ini melalui contoh kod.

Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>文字列表无缝向上滚动代码</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
body{font-size:12px}
#demo{
overflow:hidden;
height:80px;
width:280px;
margin:90px auto;
position:relative;
}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1 li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
#demo2 li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
</style>
<script type="text/javascript"> 
var speed=40 
window.onload=function(){
var demo=document.getElementById("demo"); 
var demo2=document.getElementById("demo2"); 
var demo1=document.getElementById("demo1"); 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo.scrollTop>=demo1.offsetHeight){
demo.scrollTop=0; 
}
else{ 
demo.scrollTop=demo.scrollTop+1;
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function(){clearInterval(MyMar)} 
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} 
}
</script>
</head>
<body>
<div id="demo">
<ul id="demo1">
<li><a href="#" target="_blank">脚本之家欢迎您的到来</a></li>
<li><a href="#" target="_blank">只有努力才会有美好的明天</a></li>
<li><a href="#" target="_blank">没有人一开始就是高手，都是从菜鸟开始</a></li>
<li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li>
<li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li>
<li><a href="#" target="_blank">今天你写代码了吗</a></li>
<li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li>
</ul>
<div id="demo2"></div>
</div>
</body>
</html>

Salin selepas log masuk

Kod di atas melaksanakan kesan menatal senarai berita Proses pelaksanaan diperkenalkan di bawah:

1. Prinsip pelaksanaan:

Prinsip umum adalah seperti berikut. Terdapat dua sub-elemen dalam elemen demo, demo1 dan demo2, dan kandungan dalam demo1 disimpan dalam demo2. Sebab untuk melakukan ini adalah supaya demo2 boleh mengikuti demo1 apabila menatal ke atas Jika tidak, ia tidak akan menjadi tatal lancar, tetapi tatal lancar Apabila kandungan demo1 disekat sepenuhnya, iaitu, apabila demo1 ditatal sepenuhnya, demo2 akan berada tepat pada kedudukan di mana demo1 mula menatal, dan kemudian tatal atas. nilai demo akan ditetapkan semula, biarkan penatalan bermula semula, dengan itu mencapai kesan penatalan yang lancar.

Ini ialah kod contoh untuk melaksanakan tatal ke atas yang lancar bagi senarai berita berdasarkan JS Saya harap anda boleh menggunakan kod ini mengikut keperluan sebenar anda.