<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div{ 200px; height: 200px; background: red; margin: 20px; } </style> <script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function () { startMove(oDiv, 'width', 300, function () { startMove(oDiv, 'height', 300) }) } } </script> </head> <body> <div id="div"></div> </body> <script src="move.js"></script> </html>
move.js
function getStyle(obj,name){ if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name] } } //var alpha = 30;所有的东西都不能公用 function startMove (obj,attr,iTarget,fnEnd) { clearInterval(obj.time); obj.time = setInterval(function(){ var cur = 0; if (attr == 'opacity') { cur = Math.round(parseFloat(getStyle(obj,attr))*100); } else { cur = parseInt(getStyle(obj,attr)); } var speed = (iTarget-cur)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if (cur == iTarget) { clearInterval(obj.time); 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'; } } },30) }