运动的封装+调用案例（摘）
作者：互联网
运动函数：
function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; }}
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>
标签：opacity,iCur,调用,封装,attr,案例,iSpeed,var,obj 来源： https://www.cnblogs.com/hilxj/p/10504610.html