运动函数：
functionstartMove(obj, json, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0;
obj.iTimer = setInterval(function() {
var iBtn = true;
for ( var attr in json ) {
var iTarget = json[attr];
if (attr == ‘opacity‘) {
iCur = Math.round(css( obj, ‘opacity‘ ) * 100);
} else {
iCur = parseInt(css(obj, attr));
}
iSpeed = ( iTarget - iCur ) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != iTarget) {
iBtn = false;
if (attr == ‘opacity‘) {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = ‘alpha(opacity=‘+ (iCur + iSpeed) +‘)‘;
} else {
obj.style[attr] = iCur + iSpeed + ‘px‘;
}
}
}
if (iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
测试案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>放大</title>
<script src="move.js"></script>
<style>
*{margin: 0;padding: 0}
#div1{width: 100px;height: 100px;background: #ddd;position: relative;top: 200px;left: 200px;}
</style>
</head>
<body>
<div id="div1"></div>
<script>
var div1=document.getElementById("div1");
div1.onmouseover=function(){
startMove(this,{width:200,height:200,left:150,top:150})
}
div1.onmouseout=function(){
startMove(this,{width:100,height:100,left:200,top:200})
}
</script>
</body>
</html>
