0

今まで見た中で最も遅い ASP ボックスでこれを実行するつもりなので、jQuery を使用するつもりはありません。jQuery を使用するとすべてがはるかに簡単になることはわかっていますが、コードを人間と同じくらい小さく保つ必要があります。可能。私が今まで見た中で最も遅いインターネットを使用しているユーザーをターゲットにしているため、jQuery ファイル全体をロードすると、インターネットに負荷がかかりすぎます。したがって、このスクリプトに jQuery を使用するつもりはありません。

ユーザーがサムネイルにカーソルを合わせると、より大きな画像がポップアップするスクリプトを作成しようとしています。これを実現するために、次のJavaScriptを使用しています。

var hoverImage  = document.getElementById("largeImage");

function hoverZoom(selector) {
    this.node = document.querySelector(selector);
        if(this.node === null) {
            console.log("Node not found");
    }

    return this.node.id;
}

hoverZoom.prototype.show = function(x, y) {
    var largeImageSrc                   = this.node.name;
    hoverImage.style.display            = "block";
    var largeWidth                      = hoverImage.offsetWidth;
    var largeHeight                     = hoverImage.offsetHeight;
    hoverImage.style.top                = y - (largeHeight / 2) + "px";
    hoverImage.style.left               = x - (largeWidth / 2) + "px";
    hoverImage.style.position           = "absolute";
    hoverImage.style.background         = "url(" + largeImageSrc + ")";
}

hoverZoom.prototype.hide = function() {
    hoverImage.style.display    = "none";
}

hoverZoom.prototype.checkCoords = function(x, y) {
    var id              = document.getElementById(this.node.id);
    var elemTop         = id.offsetTop;
    var elemLeft        = id.offsetLeft;
    var elemHeight      = id.offsetHeight;
    var elemWidth       = id.offsetWidth;
    console.log(x + " " + y + " " + this.node.id + " " + id + " " + elemHeight + " " + elemWidth + " " + elemTop + " " + elemLeft);

    if(x >= elemLeft && x <= elemLeft + elemWidth && y >= elemTop && y <= elemTop + elemHeight) {
        return true;
    }
}

document.body.onmousemove = function(e) {
    e           = e || window.event;
    while(hoverZoomPI.checkCoords(e.clientX, e.clientY) === true) {
        var target  = e.target || e.srcElement,
            offsetX = e.clientX,
            offsetY = e.clientY;

            return hoverZoomPI.show(offsetX, offsetY);
    }
    hoverZoomPI.hide();         
}

var hoverZoomPI = new hoverZoom(".test");

私の問題は、同じクラス名の別の画像にカーソルを合わせても何も起こらないことです。しかし、クラス名の最初の画像にカーソルを合わせると機能します。

すべてのコードと例を使用して jsFiddle をセットアップしました: http://jsfiddle.net/f7xqF/

助けてくれてありがとう。ここ数年、皆さんがどれだけ私を助けてくれたか、言葉では言い尽くせません。

4

1 に答える 1

2

document.querySelectorAll代わりdocument.querySelectorに、最初のノードだけでなく、すべてのノードの LIST を取得するために使用する必要があります。その後、もちろん、収集されたすべての要素にコールバックをアタッチする必要があります。

于 2013-08-21T15:19:17.717 に答える