JavaScript实现滚动栏效果的方法

这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了javascript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：

<script> window.onload=function(){ var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var oLi=oUl.getElementsByTagName('li'); var oLeft=document.getElementById('leftDiv'); var oright=document.getElementById('rightDiv'); oUl.innerHTML+=oUl.innerHTML; oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'; var speed=-2; function move(){ if (oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left='0'; }else if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px'; } oUl.style.left=oUl.offsetLeft+speed+'px'; }; var timer=setInterval(move,30); oLeft.onclick=function(){ speed=-2; }; oright.onclick= function () { speed=2; }; oUl.onmouseover=function(){ clearInterval(timer); }; oUl.onmouseout=function(){ timer=setInterval(move,30); }; } </script>

希望本文所述对大家的javascript程序设计有所帮助。

，