缩放多张图片

Question

我需要在悬停时缩放不同 DIV 内的图像；我可以一次缩放所有图像，但不能完全缩放。

https://jsfiddle.net/fwUMx/2094/

$('img').load(function() {
    $(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
    });
});

body {
    background:black;
}
img {
    display:block; 
    margin:10px; 
    height: 20%;
}
div {
    background:red;
    height: 200px;
    width: 200px;   
}

<div class="imagen">
    <img src="http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico">
</div>
<div class="imagen">
    <img src="http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico">
</div>
<div class="imagen">
    <img src="http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico">
</div>

Answer 1

试试这个：-

$('img').load(function() {
    $(this).data('height', this.height);
})

$('.imagen').on('mouseenter mouseleave', function(e) {
    var img = $(this).children('img');
    $(img).stop().animate({
        height: $(img).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
    });
});

Fiddle

您将 mouseenter mouseleave 绑定到 img 而不是父级 div。

缩放多张图片

Zoom several images

jquery

image

zooming