javascript - 悬停时显示图像名称.. 使用 jquery 代码

Question

这个 html 代码

<div id="imgDisp">
</div>

这个jquery

$(document).ready(function() {
var imgSrc = "images/newIMG.png";

$("#imgDisp").css({
    background: "url("+imgSrc+") repeat"
});

var newImg = new Image();
newImg.src = imgSrc; 

newImg.onload = function() {
    var imgHeight = newImg.height;
    var imgWidth = newImg.width;

    $("#imgDisp").css({
        width : imgWidth*10,
        height: imgHeight*10
    });
}
});

通过这段代码，我将图像水平重复 10 次，垂直重复 10 次。即我得到的一个 10x10 的盒子。

现在我尝试了一些方法，这样当我将鼠标悬停在图像上时，图像的名称就会出现。但是图像名称应该是它存在的数字。即第 2 行第 3 列的悬停图像其名称应显示为 i=2, j=3。

Answer 1

mousemove您可以使用事件pageX/成员获取鼠标的位置pageY（通常您还必须减去偏移量，但在我的示例中，所有内容都与左上角齐平）：

$("#imgDisp").css({
        width : imgWidth*10,
        height: imgHeight*10
    }).on('mousemove', function (e) {
        var i = Math.ceil(e.pageX / imgWidth);
        var j = Math.ceil(e.pageY / imgHeight);
    });

http://jsfiddle.net/xgbed/2/

Answer 2

像这样添加所有 id 图像，var images = $("#img1, #img2, #img3,.... #img10"); 然后在悬停时使用$(this).attr('id');