Javascript之链式运动框架1

第一部分:HTML内容:

<script src="6-1.js"></script>
<script>
window.onload=function(){
var oDiv=document.getElementById('div');
var timer=null;
oDiv.onclick=function(){
move(oDiv,600,3000,'width',function(){
move(oDiv,600,3000,'left');
});
};
}
</script>
</head>
<body>
<div id="div"></div>
</body>

第二部分:6-1.js内容:
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name]
}
}
function move(obj,iTarget,time,name,fn){
var timer=null;
clearInterval(obj.timer);
var start=parseFloat(getStyle(obj,name));//getstyle传的是带单位的,所以要加parsefloat,并且便于对opacity进行转换。
var dis=iTarget-start;
var count=Math.floor(time/30);
var step=dis/count;
var n=0;
obj.timer=setInterval(function(){
n++;
var cur = start + n * dis / count;
if(name=='opacity'){
obj.style.opacity=cur;
obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';
}else{
obj.style[name]=cur+'px';
}
if(n==count){
clearInterval(obj.timer);
fn && fn();
}
},30)
}



因为封装好了框架,所以,在进行类似的代码的编写的时候,可以直接调用move函数。
posted @ 2016-11-02 23:40  Beyrl.pan  阅读(274)  评论(0编辑  收藏  举报