Javascript之链式运动框架1
Posted Beyrl.pan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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函数。
以上是关于Javascript之链式运动框架1的主要内容，如果未能解决你的问题，请参考以下文章