运动框架 js

以下为小demo 中间的为js 核心，主要 是根据传入的不同参数来执行不同的运动效果。最后一个参数根据自己需要决定，是个回调函数。

 

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
window.onload=function(){
var obtn=document.getElementById('btn1');
var odiv=document.getElementById('div1');
obtn.onclick=function(){
startMove(odiv,{width:205,height:400},function(){
startMove(odiv,{opacity:100});
});
}
}
</script>
<script>
function startMove(obj,json,fnEnd){
clearInterval(obj.timer);

obj.timer=setInterval(function(){
var bStop=true;//假设所有的值都到 了

for(var attr in json){
//alert('aaaa');
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(cur==json[attr]){
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+'px';
}
}
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd){
fnEnd();
}
}
},30);

}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}

</script>
</head>

<body>
<input id='btn1' type='button' vale='adfs'/>
<div id='div1'></div>
</body>
</html>

17:16:57

posted @ 2013-10-05 17:25  心飞翔，光阴已逝  阅读(89)  评论(0)    收藏  举报