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);
  });
 });

在悬停图像缩放

2 个答案: