使用 Jquery 在鼠标悬停时放大动态图像？

Question

我有一组图像标签，其 ID 为 Image1、Image2、Image3 ....

1,2,3是数组索引，标签是动态创建的。有时我可能有一张图片，有时我可能有更多图片。它们内联，尺寸小 (100 X 100)。

悬停或进入时，我需要放大悬停的图像

example post

这个 post 似乎提供了一个很好的解决方案，但 $('#zoomimg') 是预先定义的。有没有办法在 enter/leave 上自我识别标签 ID？

图片标签创建如下：

var i = 0;
images.forEach(function(anImage) {
    var imagePath = url + anImage;
    $('#partImages').append("<img id='" + "partImages" + i++ + "' src=" + imagePath + " height='100' width='100' />");
});

感谢帮助

Answer 1

只需使用正确的选择器，例如常见的 class 或通用的 'img':

$('img').mouseenter(function() {
    $(this).css("cursor","pointer");
    $(this).animate({width: "50%", height: "50%"}, 'slow');
});

然后你可以使用this来识别当前悬停的图像

http://jsfiddle.net/6Lwty5qL/

使用 Jquery 在鼠标悬停时放大动态图像？

Enlarging dynamics images on mouseover using Jquery?

jquery

image