<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美运动框架</title>
<style>
body,div{
margin:0;
padding:0;
}
#div1{
width:200px;
height:100px;
background-color: yellow;
margin-bottom:20px;
border:4px solid #000;
opacity:0.3;
}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(oDiv,{width:400,height:200,opacity:100}); //json格式
};
oDiv.onmouseout = function(){
startMove(oDiv,{opacity:30,height:100,width:200}); //json
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
// startMove(obj,{attr1:itarget1,attr2:itarget2},fn) json格式
function startMove(obj,json,fn){
var flag = true; //标志 假设所有运动都达到目标
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1.定义变量
var iCur = null;
if( attr == 'opacity'){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
//2.定义变换速度
var speed = (json[attr] - iCur)/8;
speed = speed >0 ? Math.ceil(speed) :Math.floor(speed);
//3.判断变量是否达到目标
//没有达到
if(iCur != json[attr]){
flag =false;
}
if( attr == 'opacity'){
obj.style.opacity = (iCur + speed)/100;
}else{
obj.style[attr] = iCur + speed + 'px';
}
//达到了
if(flag){
if(fn){
fn();
}
}
}
},30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
