javascript,上下,无缝滚动本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考，具体如下： 前面介绍了JS左右无缝滚动效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是 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 的值即可，初始默认为向上移动，即速度为负数。 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》 希望本文所述对大家JavaScript程序设计有所帮助。
javascript,上下,无缝滚动
|
