<! DOCTYPE html>
<meta http-equiv= "Content-type" charset= "Utf-8"/>
<meta http-equiv= "Content-type" content= "text/html"/>
<title>demo</title>
<style type= "Text/css" >
ul,li,img{margin:0;padding:0;border:0;}
#list {Height:250px;list-style-type:none;overflow:hidden;}
</style>
<body>
<div id= "Odiv" style= "position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;" ></div>
<script type= "Text/javascript" >
var Odiv=document.getelementbyid (' Odiv ');
Odiv.onmouseover=function () {
Move (this, ' width ', 500,function () {
Move (Odiv, ' left ', 300,function () {
Move (odiv, ' height ', 500,function () {
Move (Odiv, ' borderwidth ', 10)
})
})});}
function Move (OBJ,ARR,TARGET,FN) {
var dt=null,speed=0,ol=0;
Clearinterval (DT);
Dt=setinterval (function () {
Ol=parseint (Obj.style[arr]);
if (ol==target) {
Clearinterval (DT);
if (FN) FN ();
}else{
Speed= (Target-ol)/8;
Speed>0?speed=math.ceil (Speed): Speed=math.floor (speed);
obj.style[arr]=ol+speed+ "px";
}
},30);
}
</script>
</body>
