hover-preview.js (1851B)
1 2 document.addEventListener('DOMContentLoaded', function () { 3 const IMAGE_EXTENSIONS = /\.(jpe?g|png|gif|webp)$/i; 4 const VIDEO_EXTENSIONS = /\.(mp4|webm|m4v)$/i; 5 6 const tooltip = document.createElement('div'); 7 tooltip.id = 'thumb-tooltip'; 8 Object.assign(tooltip.style, { 9 position: 'fixed', 10 display: 'none', 11 pointerEvents: 'none', 12 zIndex: '9999', 13 border: '1px solid #888', 14 background: '#fff', 15 padding: '3px', 16 borderRadius: '4px', 17 boxShadow: '0 2px 8px rgba(0,0,0,0.3)', 18 }); 19 const tooltipImg = document.createElement('img'); 20 tooltipImg.style.maxWidth = '200px'; 21 tooltipImg.style.maxHeight = '200px'; 22 tooltipImg.style.display = 'block'; 23 tooltip.appendChild(tooltipImg); 24 document.body.appendChild(tooltip); 25 26 document.querySelectorAll('.file-item a').forEach(function (link) { 27 const filename = link.title || link.textContent.trim(); 28 const isImage = IMAGE_EXTENSIONS.test(filename); 29 const isVideo = VIDEO_EXTENSIONS.test(filename); 30 if (!isImage && !isVideo) return; 31 32 const thumbUrl = isVideo 33 ? '/uploads/thumbnails/' + filename + '.jpg' 34 : '/uploads/' + filename; 35 36 link.addEventListener('mouseenter', function () { 37 tooltipImg.src = thumbUrl; 38 tooltip.style.display = 'block'; 39 }); 40 41 link.addEventListener('mousemove', function (e) { 42 const pad = 16; 43 const tw = tooltip.offsetWidth; 44 const th = tooltip.offsetHeight; 45 let x = e.clientX + pad; 46 let y = e.clientY + pad; 47 if (x + tw > window.innerWidth) x = e.clientX - tw - pad; 48 if (y + th > window.innerHeight) y = e.clientY - th - pad; 49 tooltip.style.left = x + 'px'; 50 tooltip.style.top = y + 'px'; 51 }); 52 53 link.addEventListener('mouseleave', function () { 54 tooltip.style.display = 'none'; 55 tooltipImg.src = ''; 56 }); 57 }); 58 });