Wenn es viele Neuigkeiten gibt und diese beispiellos begrenzt sind, ist die Verwendung des Scrollens eine gute Wahl. In diesem Kapitel wird anhand von Codebeispielen erläutert, wie dieser Effekt erzielt werden kann.
Das Codebeispiel lautet wie folgt:
<!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> Der obige Code implementiert den Scrolleffekt der Nachrichtenliste. Der Implementierungsprozess wird unten vorgestellt:
1. Umsetzungsprinzip:
Das allgemeine Prinzip ist wie folgt: Es gibt zwei Unterelemente im Demo-Element, Demo1 und Demo2, und der Inhalt in Demo1 wird in Demo2 gespeichert. Der Grund dafür ist, dass Demo2 beim Scrollen nach oben folgen kann Andernfalls erfolgt kein nahtloses Scrollen, sondern ein nahtloses Scrollen. Wenn der Inhalt von Demo1 vollständig blockiert ist, dh wenn Demo1 vollständig nach oben gescrollt ist, befindet sich Demo2 genau an der Position, an der Demo1 zu scrollen beginnt Der Demo-Wert wird zurückgesetzt. Lassen Sie den Bildlauf von vorne beginnen, um einen nahtlosen Bildlaufeffekt zu erzielen.
Dies ist der Beispielcode zum Implementieren eines nahtlosen Aufwärtsscrollens der Nachrichtenliste basierend auf JS. Ich hoffe, Sie können diesen Code entsprechend Ihren tatsächlichen Anforderungen anwenden.
