1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="content-type" charset="utf-8" />
5 <meta http-equiv="content-type" content="text/html" />
6 <title>demo</title>
7 </head>
8 <body>
9
10 <div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;"></div>
11
12
13 <script type="text/javascript">
14
15 var odiv=document.getElementById('odiv');
16
17 odiv.onmouseover=function(){
18 move(this,'width',500,function(){
19 move(odiv,'left',300,function(){
20 move(odiv,'height',500,function(){
21 move(odiv,'borderWidth',10)
22 });
23 });
24 });
25 }
26
27
28 function move(obj,arr,target,fn){
29 clearInterval(obj.dt);
30 obj.dt=setInterval(function(){
31 obj.ol=parseInt(obj.style[arr]);
32 if(obj.ol==target){
33 clearInterval(obj.dt);
34 if(fn) fn();
35 }else{
36 obj.speed=(target-obj.ol)/8;
37 obj.speed>0?obj.speed=Math.ceil(obj.speed):obj.speed=Math.floor(obj.speed);
38 obj.style[arr]=obj.ol+obj.speed+"px";
39 }
40 },30);
41 }
42
43
44 </script>
45 </body>
46 </html>