图片放大缩小时会微微抖动几下，怎么解决？

<!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; background:#333333}
#img1{ left:500px; 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)
{
 
clearInterval(obj.timer);
 obj.timer=setInterval(function(){
 var bStop=true;
 for(var attr in json)
 {
   var iCur=parseInt(getStyle(obj,attr));
 var iSpeed=(json[attr]-iCur)/20;
 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
   
if(iCur!=json[attr])
 {
   bStop=false;
 } obj.style[attr]=iCur+iSpeed+'px';
   
}
 if(bStop)
 {
 clearInterval(obj.timer);
 }
 },30);
}
</script>
</head><body>
<img src="http://img4.3lian.com/sucai/img2/234/Woaf03.jpg" id="img1" />
</body>
</html>

解决方案 »

  1.   

    <!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; background:#333333}
    #img1{ left:500px; 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,left:400,top:100})//这个地方不能用marginTop和marginLeft,要用left和top,因为是绝对定位嘛  }
      oImg.onmouseout=function()
      {
      startMove(oImg,{width:128,height:128,left:500,top:200})   
      }
        
    }
    function getStyle(obj, attr)
    {
      if(obj.currentStyle)
     {
     return obj.currentStyle[attr];
     }
     else
     {
     return getComputedStyle(obj, false)[attr]
     }
    }function startMove(obj,json)
    {
     
    clearInterval(obj.timer);
     obj.timer=setInterval(function(){
     var bStop=true;
     for(var attr in json)
     {
      var iCur=parseInt(getStyle(obj,attr));
      //这个地方特别要注意：left和top的变动幅度是宽高改变的幅度的一半！你仔细想想，一个大盒子套一个小盒子，小盒子和大盒子的边距是:(大盒子的尺寸-小盒子的尺寸)/2
      var wh=20;
    if(attr=="left"||attr=="top")
    wh=wh/2;
     var iSpeed=(json[attr]-iCur)/wh; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(iCur!=json[attr])
     {
      bStop=false;
     } obj.style[attr]=iCur+iSpeed+'px';
        
    }
     if(bStop)
     {
     clearInterval(obj.timer);
     }
     },30);
    }
    </script>
    </head><body>
    <img src="http://avatar.profile.csdn.net/6/8/E/2_zhoufeng0401.jpg" id="img1" />
    </body>
    </html>