鼠标悬停在所述图像的缩略图上时弹出 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    }}...然后删除元素 when onmouseout。我确信有一些库可以让这更容易，比如 jQuery，但我试图用 JavaScript 来更好地理解它。

Answer 1

看看下面的片段。

HTML 部分是如此简单。您在屏幕上有一些类.image 的图像。

CSS 部分也很简单。你有两个类：

• 图像类

• 和克隆图像类

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

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

• 然后docReady函数侦听文档的状态以准备就绪

有关docReady功能的更多信息，请参阅此链接

• 加载文档内容后，使用getElementsByClassName函数获取所有图像

• 然后在 for 循环中，遍历它们并为mouseenter和mouseleave创建一个事件侦听器

• 在mouseenter事件中，创建一个元素，然后向其添加id、class和src并操作顶部和左侧（取决于您想要的位置。使用位置引擎！）。毕竟将它添加/附加到正文。

• 并在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>