Question

~~好的我打算在我见过的最慢的ASP盒子上运行它，所以我不打算使用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/

感谢大家的帮助。在过去的几年里，我不能说你们有多少人帮助了我。

Answer 1

您应该使用document.querySelectorAll而不是document.querySelector来获取所有节点的LIST，而不仅仅是第一个节点。在那之后你当然应该把回调附加到所有收集的元素。

目标类名称，但在唯一ID上调用函数

1 个答案: