使用Jquery在鼠标悬停时放大图像？

我想在鼠标悬停时放大图像，并在鼠标移出后将大小缩小回正常。我有以下几点：使用Jquery在鼠标悬停时放大图像？

$('#image img').live("mouseover", function(){ 
      var $this=$(this); 

      $this.attr('width','25%'); 
      $this.attr('height','25%'); 


     })

的扩大部分工作正常，但我不知道如何鼠标移开后减小尺寸。此外，我认为我的代码有点难看，不知道如何解决它。非常感谢。

来源

2012-08-01 FlyingCat

试试这个：http://jsfiddle.net/FPKAP/11/或使用悬停：http://jsfiddle.net/FPKAP/12/

当你将鼠标悬停在HULK将zoomin和鼠标放大出。

这会帮助的需要，还是让我知道，如果我误解了什么，请，:)

代码

$('#zoomimg').mouseenter(function() { 
    $(this).css("cursor","pointer"); 
    $(this).animate({width: "50%", height: "50%"}, 'slow'); 
}); 

$('#zoomimg').mouseleave(function() { 
    $(this).animate({width: "28%"}, 'slow'); 
});

代码

$('#zoomimg').hover(function() { 
    $(this).css("cursor", "pointer"); 
    $(this).animate({ 
     width: "50%", 
     height: "50%" 
    }, 'slow'); 

}, function() { 
    $(this).animate({ 
     width: "28%" 
    }, 'slow'); 

});

来源

2012-08-01 23:57:49

你为什么不使用'.hover（）'？ – Blender 2012-08-01 23:59:20

@Blender我认为自己脑中冻结了'：）''因为我读了'mouseover'并且使用了'mouseenter'''''''' yep会立即改变，谢谢你bruvnic！ – 2012-08-02 00:00:43

@Blender done：:)'http://jsfiddle.net/FPKAP/12/ – 2012-08-02 00:03:18

我第一次尝试CSS此：

#image img { 
    width: 50%; 
    height: 50%; 
} 

#image img:hover { 
    width: 100%; 
    height: 100%; 
}

来源

2012-08-01 23:57:27 Blender

你可以使用这个：jsFiddle

$('#image').hover(function(){ 
    $(this).css({width:"100%",height:"100%"}); 
},function(){ 
    $(this).css({width:"50%",height:"50%"}); 
});

来源

2012-08-02 00:02:22 JCOC611

增加图像的宽度和高度，改变图像的位置（即）它被放大但不在原始图像存在的相同位置。

使用缩放属性将解决此问题。

.transition { 
    -webkit-transform: scale(2); 
    -moz-transform: scale(2); 
    -o-transform: scale(2); 
    transform: scale(2); 
}

小提琴链接：http://jsfiddle.net/RC7kb/178/

来源

2015-06-16 06:37:41

使用Jquery在鼠标悬停时放大图像？

回答

相关问题