Bildvorschau beim Hover (JS)
Zeigt eine große schwebende Bildvorschau neben dem Cursor, wenn du ein Miniaturbild überfährst.
Code zum Kopieren
// 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'; });So verwendest du dieses Beispiel
- Kopiere den Code mit der Schaltfläche oben.
- Installiere JustZix (2 Minuten) und öffne die Erweiterung auf der Zielseite.
- Füge eine neue Regel hinzu, die zu dieser Seite passt.
- Füge den Code in das JavaScript-Panel der Regel ein und speichere — er läuft bei jedem Seitenbesuch.
Bewerte dieses Beispiel
Noch keine Bewertungen — sei der Erste.