simple-image-magnifier
Version:
Image Magnifier JavaScript (Typescript) | Image Zoom on Hover using | Image Hover Effect
2 lines (1 loc) • 745 B
JavaScript
;function g(d,u,c){const o=(e,f)=>{const r=typeof e=="string"?(f||document).querySelector(e):e;if(!r)throw new Error(`Element ${typeof e=="string"?`with selector '${e}'`:"is"} not found`);return r},n=o(d),i=o(u,n),t=o(c,n);let a=1,l=1;const s=()=>{t&&(t.style.width=t.naturalWidth+"px",t.style.height=t.naturalHeight+"px",a=t.naturalWidth/n.clientWidth-1,l=t.naturalHeight/n.clientHeight-1)},h=()=>{i.style.opacity="0",t.style.opacity="1"},y=()=>{i.style.opacity="1",t.style.opacity="0"},p=e=>{t.style.top=`${-e.offsetY*l}px`,t.style.left=`${-e.offsetX*a}px`};return(()=>{t.addEventListener("load",s),n.addEventListener("mouseenter",h),n.addEventListener("mouseleave",y),n.addEventListener("mousemove",p)})(),s(),s}module.exports=g;