js图片放大镜实例讲解(必看篇)

2024-01-28 16:10:03 47

#small{ width:300px; height:300px; border:1pxsolidfirebrick; float:left; position:relative; } #smallimg{ width:100%; height:100%; } #mask{ width:100px; height:100px; background:rgba(0,0,0,0.3); position:absolute; top:0; left:0; display:none; } #big{ width:300px; height:300px; border:1pxsolidhotpink; overflow:hidden; float:left; margin-left:50px; position:relative; display:none; } #bigimg{ position:absolute; } window.onload=function(){ //获取到所有的元素,因为有对应元素的移动,所以在设置样式的,一定要给对应的元素绝对定位,类似于拖拽 varoSmall=document.getElementById('small'), oMask=document.getElementById('mask'), oBig=document.getElementById('big'), oBigImg=document.getElementById('bigImg'); //给当前小的div一个鼠标移入事件 oSmall.onmouseover=function(){ //当鼠标移入时,对应的区域显示小的观察框，和对应的右面的放大图片 oMask.style.display='block'; oBig.style.display='block'; }; oSmall.onmouseout=function(){ //当鼠标移除时对应的区域隐藏 oMask.style.display='none'; oBig.style.display='none' } oSmall.onmousemove=function(ev){ //首先获取到event事件 varoEvent=ev||event; //offsetWidth=本身的样式宽+左右padding+左右border //clientXclientY获取鼠标指针位置,相对于当前窗口的X和Y坐标 //鼠标距离当前窗口左边的距离了l,就为当前鼠标距离窗口左边的距离减去小的观察框的宽度 //oMask.offsetWidth/2设置鼠标处于正中心的位置 varl=oEvent.clientX-oMask.offsetWidth/2; vart=oEvent.clientY-oMask.offsetHeight/2; //对观察框距离的限制,1.当它距离左边的距离比0小的时候,设置它为0就是它移动到最左边的时候 if(l<0){ l=0; }elseif(l>oSmall.offsetWidth-oMask.offsetWidth){ //当它移动到最右边的时候,设置它的left值为当前的left值 l=oSmall.offsetWidth-oMask.offsetWidth; }; //同理对上下边界进行设置 if(t<0){ t=0; }elseif(t>oSmall.offsetHeight-oMask.offsetHeight){ t=oSmall.offsetHeight-oMask.offsetHeight; }; //设置小的观察框的移动时的当前位置 oMask.style.left=l+'px'; oMask.style.top=t+'px'; //设置对应的右边放大图片对应的位置 //varscale=l/(oSmall.offsetWidth-oMask.offsetWidth); //大的可视区域的宽减去小的观察框对应的宽,就是可移动的总距离,当前处的位置,处于总的距离的比例与大图片,在大图片的可视框里所处的位置相同所以如下 oBigImg.style.left=l*(oBig.offsetWidth-oBigImg.offsetWidth)/(oSmall.offsetWidth-oMask.offsetWidth)+"px"; oBigImg.style.top=t*(oBig.offsetHeight-oBigImg.offsetHeight)/(oSmall.offsetHeight-oMask.offsetHeight)+"px"; } }

以上这篇js图片放大镜实例讲解(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

js图片放大镜实例讲解(必看篇)

热门推荐

随机推荐