Podgląd obrazu po najechaniu (JS)
Wyświetla duży pływający podgląd obrazu obok kursora, gdy najedziesz na miniaturę.
Kod do skopiowania
// 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'; });Jak użyć tego przykładu
- Skopiuj kod przyciskiem powyżej.
- Zainstaluj JustZix (2 minuty) i otwórz wtyczkę na docelowej stronie.
- Dodaj nową regułę dopasowaną do tej strony.
- Wklej kod w panelu JavaScript reguły i zapisz — uruchomi się przy każdym wejściu na stronę.
Oceń ten przykład
Brak ocen — oceń jako pierwszy.