<!--HTML-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义运动框架08-链式运动(函数传参)</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
ul li{
width: 200px;
height: 100px;
background: #FF7F50;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="js/starMove.js"></script>
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("li1");
oli.onmouseover=function(){
starMove(oli,{width:400},function(){
starMove(oli,{height:200},function(){
starMove(oli,{opacity:30})
});
});
};
oli.onmouseout=function(){
starMove(oli,"opacity",100,function(){
starMove(oli,"height",100,function(){
starMove(oli,"width",200)
});
});
};
};
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
<!--JS-->
/*框架*/
function starMove(obj,json,fn){
var flag=true;//假设所有对象都到达了目标值
clearInterval(obj.timer);//清除定时器
obj.timer=setInterval(function(){
for(var attr in json){
//兼容判断
var icur=0;
if (attr=="opacity") {
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
//parseInt(getStyle(obj,attr));
} else{
icur=parseInt(getStyle(obj,attr));
};
//var icur=parseInt(getStyle(obj,attr));//此处不兼容透明度
var t=20;
var speed=(json[attr]-icur)/t;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (icur!=json[attr]) {
flag=false;
};
//clearInterval(obj.timer);
//if(fn){fn();};
//} else{
//执行判断：处理单位不兼容透明度问题
if (attr=="opacity") {
obj.style.filter="alpha(opacity:"+(icur+speed)+")";//IE
obj.style.opacity=(icur+speed)/100;
} else{
obj.style[attr]=icur+speed+"px";//单位不兼容透明度
};
//};
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
};
};
};
},30);
};
