多个div 缓冲运动—变宽

WEB前端 waitig 512℃ 百度已收录 0评论

css:

div{
    width:100px;
    height:100px;
    background: yellowgreen;
    margin-top:20px;
}

html:

<div></div>
<div></div>
<div></div>

js

window.onload=function () {
   var oDiv=document.getElementsByTagName("div");
   for(var i=0;i<oDiv.length;i++){
       oDiv[i].timer=null;//给每个div设置timer属性(每个div都有个timer,这样就不会影响其他定时器了)
       oDiv[i].onmouseover=function () {
           startMove(this,300)
       }
       oDiv[i].onmouseout=function () {
           startMove(this,100)
       }
   }
   //运动框架
    var timer=null;
   function startMove(obj,itarget) {
       clearInterval(obj.timer);
       obj.timer=setInterval(function () {
           var ispeed=(itarget-obj.offsetWidth)/8;
           ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
           if(obj.offsetWidth==itarget){
               clearInterval(obj.timer)
           }else{
               obj.style.width=obj.offsetWidth+ispeed+"px";
           }
       },30)
   }
}


本文由【waitig】发表在等英博客
本文固定链接:多个div 缓冲运动—变宽
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)