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>
相關文章
相關標籤/搜索