本文實例講述了javascript實現(xiàn)的上下無縫滾動效果。分享給大家供大家參考，具體如下：
前面介紹了JS左右無縫滾動效果，現(xiàn)在做下無縫滾動――上下的效果。其他代碼和左右的差不多，只是改變的是 offsetTop 的值，并且不需要計算 ul 整體的寬度了。
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>無縫滾動――上下</title> <style type="text/css"> *{margin:0;padding:0;} li{list-style:none;} img{border:0;} #scroll{width:178px;margin:50px auto;position:relative;} .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;} .up{background:url(images/up.gif);} .down{background:url(images/down.gif);} .content{margin:10px 0;height:440px;overflow:hidden;position:relative;} .content ul{position:absolute;top:0;left:0;} .content li{height:110px;} </style></head><body> <div id="scroll"> <a href="javascript:;" id="up" class="btn up"></a> <div class="content"> <ul> <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li> <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li> <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li> <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li> </ul> </div> <a class="btn down" href="javascript:;" id="down"></a> </div></body></html><script type="text/javascript">window.onload = function(){ var oDiv = document.getElementById('scroll'); var btnUp = document.getElementById('up'); var btnDown = document.getElementById('down'); var oUl = oDiv.getElementsByTagName('ul')[0]; var timer = null; var speed = -1; oUl.innerHTML += oUl.innerHTML; setTimeout(move,1500); btnUp.onclick = function(){ clearInterval(timer); speed = -1; move(); }; btnDown.onclick = function(){ clearInterval(timer); speed = 1; move(); }; oUl.onmouseover = function(){ clearInterval(timer); }; oUl.onmouseout = function(){ move(); }; function move(){ timer = setInterval(function(){ oUl.style.top = oUl.offsetTop + speed + 'px'; if(oUl.offsetTop <= - oUl.offsetHeight / 2){ oUl.style.top = '0'; }else if(oUl.offsetTop >= 0){ oUl.style.top = - oUl.offsetHeight / 2 + 'px'; }; },30); };};</script>如果要改變移動速度，修改 speed 的值即可，初始默認(rèn)為向上移動，即速度為負數(shù)。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
