Javascript-изображение всплывающее при наведении курсора на миниатюру указанного изображения - PullRequest
Новая
       34

Javascript-изображение всплывающее при наведении курсора на миниатюру указанного изображения

0 голосов
/ 14 октября 2019

Я пытаюсь создать галерею, и в этой галерее я хочу, чтобы она была такой, чтобы при наведении мыши на миниатюру я хотел, чтобы увеличенная версия этого изображения всплывала у курсора, а затем исчезала, когдаВы удаляете курсор из эскиза.

Есть ли в любом случае сделать это без жесткого кодирования двух наборов изображения в коде 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чтобы понять это лучше.

1 Ответ

0 голосов
/ 15 октября 2019

Посмотрите на фрагмент ниже.

HTML-часть очень проста. У вас есть несколько изображений на экране с классом .image .

CSS-часть также очень проста. У вас есть два класса:

  • класс изображения
  • и класс клонированного изображения

Я не прокомментировал часть JS, но идея заключается в следующем:

  • Я использую закрытие и использую документ в качестве параметра для лучшей производительности
  • , затем функция docReady прослушивает состояние документа, чтобы быть готовым

Для получения дополнительной информации о функции docReady см. эту ссылку

  • после загрузки содержимого документа, получите все изображения с getElementsByClassName function
  • затем в цикле for, выполните итерацию по ним и создайте прослушиватель событий для mouseenter и mouseleave
  • in 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>
...