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

Question

我正在尝试在鼠标悬停时放大图像，并在鼠标移开后将其大小恢复正常。我有以下代码：

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

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


       })

放大部分运作良好，但我不确定如何在鼠标移开后缩小大小。此外，我认为我的代码有点丑陋，不确定如何修复它。非常感谢。

- FlyingCat

Answer 1

尝试这个：http://jsfiddle.net/FPKAP/11/或者使用 hover：http://jsfiddle.net/FPKAP/12/

当你悬停在 HULK 上时，它会放大，鼠标移开时缩小。

这应该能够满足需求，如果我有误解，请告诉我，:)

代码

$('#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');

});​

- Tats_innit

---

为什么不使用.hover()？ - Blender

@Blender，我想我自己的大脑在读到“mouseover”并使用“mouseenter”和“leave”时有点冻结了:)。是的，我现在会进行更改，谢谢你，伙计！ - Tats_innit

Answer 2

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

使用缩放属性可以解决这个问题。

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

Fiddle link : http://jsfiddle.net/RC7kb/178/

- shali ravi

Answer 3

你可以使用这个：jsFiddle。

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

- JCOC611

Answer 4

我会首先尝试使用CSS来解决这个问题：

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

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

- Blender