js完美运动框架实现同时执行

<style>
        #div1{width: 100px; height: 100px; background: red; filter:alpha(opacity:30); opacity: 0.3;}
    </style>
<script src="move.js"></script>
function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name]; 
    }
}
//startMove(oDiv,{width:120,height:300,opacity:100},function(){ alert("结束");});
function startMove(obj,json,fnEnd){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var bStop=true; //假设:所有的值都已经执行到了目标结果
        for(var attr in json){
            var cur = 0;
            if(attr=="opacity"){
                cur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                cur = parseInt(getStyle(obj,attr));
            }
            var speed=(json[attr]-cur)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(cur!=json[attr]){
                bStop=false;
            }
            if(attr=="opacity"){
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style[attr]=(cur+speed)/100;
            }else{
                obj.style[attr]=cur+speed+"px";
            }
        }
        if(bStop){
            clearInterval(obj.timer);
            if(fnEnd)fnEnd();
        }
    },30);
}

window.onload=function(){
var oDiv=document.getElementById("div1");
var oBtn = document.getElementById("btn");
oBtn.onclick=function(){
startMove(oDiv,{width:120,height:300,opacity:100},function(){
alert("结束");
});
}
}

< input type="button" id="btn" value="按钮">
< div id="div1"></div>
0
如无特殊说明,文章均为本站原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到