码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript之链式运动框架1

时间:2016-11-03 01:54:14      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:com   put   nload   get   idt   代码   floor   val   onload   

第一部分: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

标签:com   put   nload   get   idt   代码   floor   val   onload   

原文地址:http://www.cnblogs.com/beyrl-blog/p/6024964.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!