Предпросмотр картинки при наведении (JS)
Показывает большой плавающий предпросмотр картинки рядом с курсором при наведении на миниатюру.
Код для копирования
// Show a large floating preview of an image while the cursor is over it.
var box = document.createElement('div');
box.style.cssText = 'position:fixed;z-index:2147483647;pointer-events:none;' +
'border:2px solid #fff;box-shadow:0 4px 24px rgba(0,0,0,.5);display:none;';
var preview = document.createElement('img');
preview.style.cssText = 'max-width:480px;max-height:480px;display:block;';
box.appendChild(preview);
document.body.appendChild(box);
document.addEventListener('mouseover', function (e) {
var img = e.target.closest && e.target.closest('img');
if (!img || !img.currentSrc) { box.style.display = 'none'; return; }
preview.src = img.currentSrc;
box.style.display = 'block';
});
document.addEventListener('mousemove', function (e) {
box.style.left = Math.min(e.clientX + 20, innerWidth - 500) + 'px';
box.style.top = Math.min(e.clientY + 20, innerHeight - 500) + 'px';
});
document.addEventListener('mouseout', function () { box.style.display = 'none'; });Как использовать этот пример
- Скопируй код кнопкой выше.
- Установи JustZix (2 минуты) и открой расширение на нужной странице.
- Добавь новое правило, совпадающее с этой страницей.
- Вставь код в панель JavaScript правила и сохрани — он запускается при каждом заходе на страницу.
Оцени этот пример
Оценок пока нет — оцени первым.