1

この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 列目の n ホバリング画像の名前は、i=2、j=3 として表示されます。

4

2 に答える 2

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/

于 2013-01-28T14:04:13.033 に答える
0

そのようなすべてのID画像を追加しvar images = $("#img1, #img2, #img3,.... #img10"); 、ホバーで使用します$(this).attr('id');

于 2013-01-28T15:46:50.447 に答える