當(dāng)新聞較多，并且空前有限的時候，使用滾動是一個不錯的選擇，本章節(jié)就通過代碼實(shí)例介紹一下如何實(shí)現(xiàn)此效果。
代碼實(shí)例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.survivalescaperooms.com/" /><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">武林網(wǎng)歡迎您的到來</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> 以上代碼實(shí)現(xiàn)了新聞列表滾動效果，下面介紹一下實(shí)現(xiàn)過程:
一.實(shí)現(xiàn)原理:
大致原理如下，demo元素中有兩個子元素demo1和demo2，并且將demo1中的內(nèi)容存入demo2中，之所以這樣做，是為了當(dāng)向上滾動的時候，demo2能夠接在demo1的后面，否則將不是無縫滾動，而是有縫滾動了，當(dāng)demo1的內(nèi)容完全被遮擋之后，也就是demo1完全滾動上去的時候，demo2會恰好位于demo1開始滾動的位置，然后再重新設(shè)置demo的scrollTop值，讓滾動就重新來過，這樣就實(shí)現(xiàn)了無縫滾動效果。
基于JS實(shí)現(xiàn)新聞列表無縫向上滾動實(shí)例代碼就給大家介紹到這里，希望大家根據(jù)自己的實(shí)際需求應(yīng)用此段代碼。
新聞熱點(diǎn)
疑難解答
