鼠标悬停在该图像缩略图上的Javascript图像弹出框

Question

我正在尝试创建一个图片库，并且想要在该图片库中使用它，以便当我将鼠标悬停在缩略图上时，希望在光标处弹出该图片的较大版本，然后当您将其消失时，从缩略图中删除光标。

无论如何，都无需在HTML代码中对两组图像进行硬编码，而只是使用可用图像来进行此操作，例如，onmouseover创建一个显示图像较大版本的元素，并使用img悬停图像的src，然后从元素中删除光标时该图像会消失吗？

如果我尝试用代码来解释它，我想它看起来应该像这样：

const image = document.getElementsByClassName('image');

for (let i = 0; i < image.length; i++) {

    const picture = image[i];

    picture.onmouseover = () => {
       const img = document.createElement('img');
       img.src = picture.src; //using the source of the available image to display it in a larger version
    }
}

...然后在onmouseout时删除元素。

我确定有一些库可能使此操作更容易，例如jQuery，但我试图在JavaScript中使其变得更好理解。

Answer 1

请看下面的代码段。

HTML部分非常简单。屏幕上有一些图像，这些图像的类为[[.image。

CSS部分也是如此简单。您有两个课程：

图像类
• 和克隆的图像类

我没有对JS部分发表评论，但其背后的想法是：

我使用闭包并使用文档作为参数以获得更好的性能

然后是一个

docReady

函数，以侦听文档的状态为就绪有关

docReady

函数的更多信息，请参见this link

加载文档内容后，使用
• getElementsByClassName函数获得所有图像
然后在for循环中，遍历它们并为
• mouseenter

和mouseleave]]创建一个事件侦听器在

mouseenter

事件中，创建一个元素，然后向其中添加id，class和src并操纵top和left] >（取决于您想要的位置。使用位置引擎！）。毕竟，将其添加/添加到正文中。并且在

mouseleave

事件侦听器中，找到克隆的图像并将其从文档主体中删除。它可能与所有浏览器都不兼容！为此使用jQuery。

改进它并修复一些小错误，然后您就可以使用它。

我希望它会有所帮助。对不起，我的英语不好：）

// This is a closure
(function(document) {
  function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
      // call on next available tick
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

  docReady(function() {
    var images, image, id, clone;
    var i, len;
    var clone_cls = 'clone-image';
    var bound;

    images = document.getElementsByClassName('image');
    len = images.length;

    for (i = 0; i < len; i++) {
      image = images[i];

      // Mouse enter event
      image.addEventListener('mouseenter', function() {
        id = uniqueId();
        //-----
        this.setAttribute('data-clone-id', id);
        //-----
        clone = document.createElement('IMG');
        clone.src = this.src;
        clone.classList.add(clone_cls);
        clone.id = id;
        //-----
        bound = this.getBoundingClientRect();
        clone.style.top = (bound.top + pageYOffset) + 'px';
        // clone.style.right = document.body.offsetWidth - (bound.right + pageXOffset) + 'px';
        clone.style.left = (bound.left + pageXOffset) + 'px';
        document.body.appendChild(clone);
      });
      // Mouse leave event
      image.addEventListener('mouseleave', function() {
        id = this.getAttribute('data-clone-id');
        if (id) {
          this.removeAttribute('data-clone-id');
          clone = document.getElementById(id);
          if (typeof clone !== 'undefined') {
            clone.remove();
          }
        }
      });
    }

    function uniqueId() {
      var name, num, str, test;
      //-----
      name = 'clone';
      do {
        num = Math.floor(Math.random() * 100000);
        str = name + num;
        test = document.getElementById(str);
      } while (test && test.length);

      return str;
    }
  });
})(document);

.image {
  display: inline-block;
  width: 300px;
  height: 300px;
}

.clone-image {
  position: absolute;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 100%;
  z-index: 1001;
  pointer-events: none;
}

<div>
  <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 1" alt="dummy image" class="image">
  <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 2" alt="dummy image" class="image">
  <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 3" alt="dummy image" class="image">
  <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 4" alt="dummy image" class="image">
</div>