Question

我试图在鼠标悬停时放大图像，并在mouseout后缩小尺寸。我有以下内容：

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

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


       })

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

Answer 1

尝试使用：http://jsfiddle.net/FPKAP/11/ 或使用悬停：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');

});

Answer 2

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

使用Scaling属性可以解决此问题。

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

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

Answer 3

您可以使用：jsFiddle

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

Answer 4

我首先尝试使用CSS：

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

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

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

4 个答案: