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部分就这么简单。您在屏幕上有一些图像 class .image.

CSS部分也很简单。你有两个 classes:

图片class
和克隆图像 class

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

我使用闭包并使用文档作为参数以获得更好的性能
然后一个 docReady 函数监听文档的准备就绪状态

有关 docReady 函数的更多信息，请参阅 this link

文档内容加载后，通过getElementsByClassName函数获取所有图片
然后在 for 循环中，遍历它们并为 mouseenter 和 [=36 创建事件侦听器=]mouseleave
在mouseenter事件中，创建一个元素然后添加id,class 和 src 并操纵 top 和 left （取决于你想要的位置。使用位置引擎！）。毕竟add/append它到body.
并在 mouseleave 事件侦听器中，找到克隆的图像并将其从文档的 body.

它可能不兼容所有浏览器！为此目的使用 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>

Javascript 鼠标悬停在所述图像的缩略图上时弹出图像

Javascript image popup on mouseover on thumbnail of said image

javascript

gallery

onmouseover