使用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在鼠標懸停時放大圖像？

回答

相關問題