0

好的，我将在我以前见过的最慢的 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/

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

4

1 回答 1

2

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

于 2013-08-21T15:19:17.717 回答