什么是放大镜🔍
放大镜效果是电商网站中常用的网页特效，在实现放大镜效果时需要运用到offset系列的属性获取元素的位置和大小，还有鼠标事件位置属性(pageX，pageY)。比如说在电脑逛京东的时候，随便打开一个商品，把鼠标移动到商品的图片上，都可以看到放大效果，如图下。
题目要求
html代码
<html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>放大镜</title><linkrel="stylesheet"href="css/style.css"></head><body><divclass="header"></div><divclass="center"><divclass="box"><divclass="thumb"><imgsrc="img/small.jpg"> //img可以修改 放自己喜欢图片来测试 <divclass="move"></div></div><divclass="scale"><imgsrc="img/big.jpg"> //img可以修改 放自己喜欢图片来测试 </div></div></div><scriptsrc="js/index.js"></script></body></html>
css代码
body{ margin: 0; padding: 0; } img{ display: block; } .header{ height:100px; } .center{ width:800px; margin:0auto; } .box{ position:relative; width:400px; } .box.thumb{ position:relative; width:400px; height:400px; } .box.thumbimg{ width:100%; height:100%; } .box.thumb.move{ position:absolute; top:0px; left:0px; display:none; width:200px; height:200px; background-color: rgba(0,0,0,0.4); } .box.scale{ display:none; position:absolute; right:-420px; top:0; width:400px; height:400px; border:1pxsolid#ccc; overflow:hidden; } .box.scaleimg{ position:absolute; left:0; top:0; } .box.thumb:hover.move{ display:block; } .box.thumb:hover+.scale{ display:block; }
js代码
varzmFdj=function(){ varthumbElem=document.getElementsByClassName("thumb")[0], // 获取缩略图距离页面左边的距离thumbPosX=Math.round(thumbElem.getBoundingClientRect().left+document.documentElement.scrollLeft), // 获取缩略图距离页面顶部的距离thumbPosY=Math.round(thumbElem.getBoundingClientRect().top+document.documentElement.scrollTop); // 获取移动的元素varmoveElem=document.getElementsByClassName("move")[0]; // console.log(thumbPosX);// console.log(thumbPosY);thumbElem.onmousemove=function(e){ // 获取移动的元素的宽和高// var moveElemW=____(1)____;// var moveElemH=_____(2)_____;varmoveElemW=moveElem.offsetWidth; varmoveElemH=moveElem.offsetHeight; // 计算移动元素距离缩略图左边和顶部的距离// var x=____(3)_______;// var y=_____(4)________;varx=e.pageX-thumbPosX; vary=e.pageY-thumbPosY; // 设置鼠标指针在移动元素的中间位置// moveElem.style.left=____(5)_____;// moveElem.style.top=_____(6)______;moveElem.style.left=x-moveElemW/2+'px'; moveElem.style.top=y-moveElemH/2+'px'; // if(_____(7)______){if(parseInt(moveElem.style.left)<0){ moveElem.style.left=0; }elseif(parseInt(moveElem.style.left)>(thumbElem.offsetWidth-moveElemW)){ moveElem.style.left=thumbElem.offsetWidth-moveElemW+"px"; } // if(____(8)______){if(parseInt(moveElem.style.top)<0){ moveElem.style.top=0; }elseif(parseInt(moveElem.style.top)>(thumbElem.offsetHeight-moveElemH)){ moveElem.style.top=thumbElem.offsetHeight-moveElemH+"px"; } // 放大的倍数varsca=thumbElem.offsetWidth/moveElemW; varscaleEle=document.getElementsByClassName("scale")[0]; // 放大图片的位置varimg=scaleEle.getElementsByTagName("img")[0]; // img.style.left=_____(9)______;// img.style.top=_____(10)______;img.style.left=-(sca*parseInt(moveElem.style.left))+"px"; img.style.top=-(sca*parseInt(moveElem.style.top))+"px"; } } zmFdj();
题目解析
1、2题 获取移动的元素(遮罩层)的宽和高
返回指移动元素(遮罩层)的宽和高，用到offsetWidth和offsetHeight属性
3、4题 计算移动元素(遮罩层)距离缩略图左边和顶部的距离
用获取的鼠标坐标X、Y减去获取缩略图距离页面左边的距离、获取缩略图距离页面顶部的距离(e.pageX-thumbPosX e.pageY-thumbPosY)
5、6题 设置鼠标指针在移动元素(遮罩层)的中间位置
顾名思义就是获取遮罩层移动距离
7、8题 限制移动元素(遮罩层)的移动范围
做到遮罩层不移出图片的效果
9、10题 获取放大图片的位置
公式：放大图片的位置=-(放大的倍数(缩略图的宽/遮罩层的宽)*遮罩层移动距离)
之所以是负的，是为了让放大图片展示效果与遮罩层部分保持同步
效果图
