js跑马灯

须要注意的是这里须要给获取的id所在div进行定位(position:relative;)给ul进行相对定位(position:absolute;)才能让left属性滚动起来javascript

此例为向左,其余方向将left改成top或-=改成+=之类便可。速度为0.1跑的相对顺眼,调高了有点辣眼睛。。java

<script>

//获取元素
 var ooo=document.getElementById("demo");
 var oUl=ooo.getElementsByTagName("ul")[0];
 var lis=oUl.getElementsByTagName("li");

//循环赋值
 oUl.innerHTML+=oUl.innerHTML;
 oUl.style.width=lis.length*lis[0].offsetWidth+'px';
 var left=null;//初始像素
 var speed=0.1;//初始速度
 oUl.onmouseover = function(){
 speed=0;
 }    //鼠标通过时清除速度达到滚动中止的目的 
 oUl.onmouseout = function(){
 speed=0.1;
 }    //鼠标移开时重设速度 
 var timer=setInterval(function(){
 left-=speed;
 if(left<-oUl.offsetWidth/2){
 left=0;
 }
 oUl.style.left=left+'px'
 },5)
</script>
相关文章
相关标签/搜索