鼠标悬停在所述图像的缩略图上时弹出 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) {&nbsp; function docReady(fn) {&nbsp; &nbsp; // see if DOM is already available&nbsp; &nbsp; if (document.readyState === "complete" || document.readyState === "interactive") {&nbsp; &nbsp; &nbsp; // call on next available tick&nbsp; &nbsp; &nbsp; setTimeout(fn, 1);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; document.addEventListener("DOMContentLoaded", fn);&nbsp; &nbsp; }&nbsp; }&nbsp; docReady(function() {&nbsp; &nbsp; var images, image, id, clone;&nbsp; &nbsp; var i, len;&nbsp; &nbsp; var clone_cls = 'clone-image';&nbsp; &nbsp; var bound;&nbsp; &nbsp; images = document.getElementsByClassName('image');&nbsp; &nbsp; len = images.length;&nbsp; &nbsp; for (i = 0; i < len; i++) {&nbsp; &nbsp; &nbsp; image = images[i];&nbsp; &nbsp; &nbsp; // Mouse enter event&nbsp; &nbsp; &nbsp; image.addEventListener('mouseenter', function() {&nbsp; &nbsp; &nbsp; &nbsp; id = uniqueId();&nbsp; &nbsp; &nbsp; &nbsp; //-----&nbsp; &nbsp; &nbsp; &nbsp; this.setAttribute('data-clone-id', id);&nbsp; &nbsp; &nbsp; &nbsp; //-----&nbsp; &nbsp; &nbsp; &nbsp; clone = document.createElement('IMG');&nbsp; &nbsp; &nbsp; &nbsp; clone.src = this.src;&nbsp; &nbsp; &nbsp; &nbsp; clone.classList.add(clone_cls);&nbsp; &nbsp; &nbsp; &nbsp; clone.id = id;&nbsp; &nbsp; &nbsp; &nbsp; //-----&nbsp; &nbsp; &nbsp; &nbsp; bound = this.getBoundingClientRect();&nbsp; &nbsp; &nbsp; &nbsp; clone.style.top = (bound.top + pageYOffset) + 'px';&nbsp; &nbsp; &nbsp; &nbsp; // clone.style.right = document.body.offsetWidth - (bound.right + pageXOffset) + 'px';&nbsp; &nbsp; &nbsp; &nbsp; clone.style.left = (bound.left + pageXOffset) + 'px';&nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(clone);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; // Mouse leave event&nbsp; &nbsp; &nbsp; image.addEventListener('mouseleave', function() {&nbsp; &nbsp; &nbsp; &nbsp; id = this.getAttribute('data-clone-id');&nbsp; &nbsp; &nbsp; &nbsp; if (id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.removeAttribute('data-clone-id');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clone = document.getElementById(id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (typeof clone !== 'undefined') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clone.remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; function uniqueId() {&nbsp; &nbsp; &nbsp; var name, num, str, test;&nbsp; &nbsp; &nbsp; //-----&nbsp; &nbsp; &nbsp; name = 'clone';&nbsp; &nbsp; &nbsp; do {&nbsp; &nbsp; &nbsp; &nbsp; num = Math.floor(Math.random() * 100000);&nbsp; &nbsp; &nbsp; &nbsp; str = name + num;&nbsp; &nbsp; &nbsp; &nbsp; test = document.getElementById(str);&nbsp; &nbsp; &nbsp; } while (test && test.length);&nbsp; &nbsp; &nbsp; return str;&nbsp; &nbsp; }&nbsp; });})(document);.image {&nbsp; display: inline-block;&nbsp; width: 300px;&nbsp; height: 300px;}.clone-image {&nbsp; position: absolute;&nbsp; max-width: 100%;&nbsp; width: auto;&nbsp; height: auto;&nbsp; max-height: 100%;&nbsp; z-index: 1001;&nbsp; pointer-events: none;}<div>&nbsp; <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 1" alt="dummy image" class="image">&nbsp; <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 2" alt="dummy image" class="image">&nbsp; <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 3" alt="dummy image" class="image">&nbsp; <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 4" alt="dummy image" class="image"></div>