图像缩放

Question

我想在悬停上实现放大图像，我在谷歌中找到了一些代码。但它给了我不想要的结果。图像缩放显示在窗口的角落。我已经使用

<img id="a1" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50"> 
<img id="a2" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50"> 

代码是

$(function() 
    { 
     $('img').hover(function() 
     { 
     $(this).css({'z-index' : '10'}); 
     $(this).animate({ 
     marginTop: '-110px', 
     marginLeft: '-110px', 
     top: '50%', 
     left: '50%', 
     width: '174px', 
     height: '174px', 
     padding: '10px' 
     }, 500); 
    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).animate({ 
    marginTop: '0', 
    marginLeft: '0', 
    top: '0', 
    left: '0', 
    width: '70px', 
    height: '70px', 
    padding: '5px' 
    }, 400); 
    }); 
}); 

Answer 1

这应该为你做它：

http://jsfiddle.net/uCtHh/1/

希望它能帮助。

Answer 2

试试这个

$(function() 
    { 
     $('img').hover(function() 
     { 
     $(this).css({'z-index' : '10'}); 
     $(this).animate({ 
     marginTop: '-110px', 
     marginLeft: '-110px', 
     top: '50%', 
     left: '50%', 
     width: '174px', 
     height: '174px', 
     padding: '10px', 
     position: 'relative' 
     }, 500); 
    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).animate({ 
    marginTop: '0', 
    marginLeft: '0', 
    top: '0', 
    left: '0', 
    width: '70px', 
    height: '70px', 
    padding: '5px', 
    position: 'static' 
    }, 400); 
    }); 
});