使用Jquery进行鼠标悬停时放大图像吗? [英] Enlarging images when mouseover using Jquery?

问题描述

我试图在鼠标悬停时放大图像，并在鼠标悬停后将尺寸减小到正常水平.我有以下内容:

I am trying to enlarge the images when mouseover and reduce the size back to normal after mouseout. I have the following:

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

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


       })

放大部分工作正常，但我不确定在鼠标移开后如何减小尺寸.另外，我认为我的代码有点丑陋，不确定如何解决.非常感谢.

The enlarging part works fine but I am not sure how to reduce the size after mouseout. Also, I think my codes are bit ugly and not sure how to fix it. Thanks a lot.

推荐答案

请尝试以下操作: http://jsfiddle.net/FPKAP/11 / 或(使用悬停): http://jsfiddle.net/FPKAP/12/

Try this: http://jsfiddle.net/FPKAP/11/ or using hover: http://jsfiddle.net/FPKAP/12/

当您将鼠标悬停在HULK上时，它将放大并在鼠标移出时将其缩小.

When you will hover over the HULK it will zoomin and on mouse out zoom out.

这应该可以满足需要，请让我知道是否误解了，:)

This should help the need, lemme know if I misunderstood anything please, :)

代码

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

});​

这篇关于使用Jquery进行鼠标悬停时放大图像吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！