使用Jquery鼠标hover时放大图像？

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

$('#image img').live("mouseover", function(){ var $this=$(this); $this.attr('width','25%'); $this.attr('height','25%'); }) 

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

Answer 1

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

当您将鼠标hover在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%; }