<!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: 100px; margin: 20px; float: left; background: red; border: blue 1px solid; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); var oDiv2 = document.getElementById('div2') oDiv.onmouseover = function(){ startMove(this,"height",300); }; oDiv.onmouseout = function(){ startMove(this,"height",100); }; oDiv2.onmouseover = function(){ startMove(this,"width",400); }; oDiv2.onmouseout = function(){ startMove(this,"width",200); } } 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) { clearInterval(obj.time); obj.time = setInterval(function(){ var 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); } else { obj.style[attr] = cur+speed+'px'; } },30) } </script> </head> <body> <div id="div1">变高</div> <div id="div2">变宽</div> </body> </html>