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

添加var images = $("#img1, #img2, #img3,.... #img10");之类的所有ID图片然后在悬停时使用$(this).attr('id');

使用jquery代码在悬停它时显示图像名称

2 个答案: