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 盒子。

现在我尝试了一些方法，这样当我将鼠标悬停在图像上时，图像的名称就会出现..但图像名称应为其出现的编号。即，n 悬停图像位于第 2 行第 3 列，其名称应显示为 i=2，j=3。

Answer 1

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

$("#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/