<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{ margin:0; padding:0;}
#img1{ left:200px; top:200px; position:absolute; width:128px; height:128px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function()
{
    var oImg=document.getElementById('img1');
        
        oImg.onmouseover=function()
        {
            startMove(oImg,{width:328,height:328,marginLeft:-100,marginTop:-100})        }
        oImg.onmouseout=function()
        {
            startMove(oImg,{width:128,height:128,marginLeft:0,marginTop:0}) 
        }
                        
}
function getStyle(obj, attr)
{
     if(obj.currentStyle)
         {
              return obj.currentStyle[attr];
         }
         else
         {
              return getComputedStyle(obj, false)[attr]
         }
}function startMove(obj,json,fn)
{
        
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
                 var bStop=true;
             for(var attr in json)
                 {
                         var iCur=0;
                         if(attr=='opacity')
                         {
                                 iCur=parseFloat(getStyle(obj,attr))*100;
                         }
                         else
                         {
                                 iCur=parseInt(getStyle(obj,attr));
                         }
                         var iSpeed=(json[attr]-iCur)/8;
                         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                         
                         if(iCur!=json[attr])
                         {
                  bStop=false;
                         }
                                  if(attr=='opacity')
                                  {
                                           obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                                           obj.style.opacity=(iCur+iSpeed)/100
                                  }
                                  else
                                  {
                                           obj.style[attr]=iCur+iSpeed+'px';                                  }                       
                 }
                 if(bStop)
                 {
                          clearInterval(obj.timer);
                          if(fn)
                          {
                                  fn()
                          } 
                 }
        },30);
}
</script>
</head><body>
<img src="http://img4.3lian.com/sucai/img2/234/Woaf03.jpg" id="img1" />
</body>
</html>