js放大镜效果
时间：2023-04-02 16:54:35
HTML
淘宝、京东等电商购物效果，查看图片放大效果。思路：先隐藏右边大图和左边小图的方块。当鼠标移入左边的smallPic时，显示里面的小方块和右边的bigPic。当鼠标移动到里面的小方块时，右边的bigPic会显示图片对应的位置。框的移动范围在其父smallPic的范围内。当鼠标放在smallPic上时，bigPic和smallPic中隐藏小框的方法主要有定位、溢出隐藏、事件对象html布局：//左边的小图//移动方块
//右侧大图
//路径自行设置 CSSstyle:#smallPic{width:200px;高度：200px；职位：相对；浮动：左；}#smallPicimg{宽度：200px；高度：200px；}#smallPicdiv{宽度：80px；高度：80px；位置：绝对；顶部：0；左：0；背景：黄绿色；不透明度：0.5；光标：移动；显示：无；}#bigPic{宽度：800px；:800px;向左飘浮;职位：相对；显示：无；溢出：隐藏；}#bigPicimg{位置：绝对；顶部：0；left:0;}js代码window.onload=function(){varsmallPic=document.getElementById('smallPic');vardiv=文档ment.querySelector('.smallPicdiv');varbigPic=document.getElementById('bigPic');varbigPicImg=document.querySelector('.bigPicimg');//鼠标进入smallPic显示div和bigPicsmallPic.onmouseover=function(){div.style.display='block';bigPic.style.display='方块';}//当鼠标在smallPic中移动时smallPic.onmousemove=function(ev){//设置两个变量，这个变量的值是让鼠标在小方块的中间，并设置相关的移动范围varx=ev.clientX-div.offsetWidth/2-small.offsetLeft;vary=ev.clientY-div.offsetHeight/2-small.offsetTop;//判断小方块的移动范围，限制在其父范围内//x轴if(x<0){x=0;}elseif(x>smallPic.offsetWidth-div.offsetWidth){x=smallPic.offsetWidth-div.offsetWidth;}//y轴if(y<0){y=0;}elseif(y>smallPic.offsetHeight-div.offsetHeight){y=smallPic.offsetHeight-div。偏移高度；}//小方块移动div.style.left=x+'px';div.style.top=y+'px';//设置小方块在其父范围内移动的百分比varscaleX=x/(smallPic.offsetWidth-div.offsetWidth);varscaleY=y/(smallPic.offsetHeight-div.offsetHeight);//按照小方块移动bigPicImg.style.left=scaleX*(bigPicImg.offsetWidth-bigPic.offsetwidth)+'px';bigPicImg.style.top=scaleY*(bigPicImg.offsetHeight-bigPi.offsetHeight)+'px';}//鼠标移出smallPic隐藏div和bigPicsmallPic.onmouseout=function(){div.style.display='none';bigPic.style.display='无';}}
