摘要：本次实战主要完成了图片放大镜的效果，通过定义原始图片，放大镜，放大后的图片，然后设置放大后的图片为原始图片的3倍，通过鼠标移上显示放大后的图片，并通过位移计算当前放大镜的位置，设置放大后图片的偏移量，来显示放大后的图片效果。代码如下：html>
本次实战主要完成了图片放大镜的效果，通过定义原始图片，放大镜，放大后的图片，然后设置放大后的图片为原始图片的3倍，通过鼠标移上显示放大后的图片，并通过位移计算当前放大镜的位置，设置放大后图片的偏移量，来显示放大后的图片效果。
代码如下：html>
图片放大镜效果$(function() {
$('#big').hide();//默认隐藏放大后的图片
// ----------------鼠标移上原始图片开始
$('#normal').mouseover(function(){ //鼠标移上原始图片时
$('#show,#big').show();//鼠标移上时，显示两张图片
$(this).mousemove(function(curMove){
//实时计算原始图片上小方块的移动距离，鼠标位于小方块的中间位置
$('#show').css({
'left':curMove.pageX-$('#show').width()/2,
'top':curMove.pageY-$('#show').height()/2
})
})
//鼠标在原始图片上的移动事件
$('#normal').mousemove(function(e){
//获取鼠标当前位置
let [curX,curY]=[e.clientx,e.clienty];
//获取原图窗口距离文档的偏移位置
let [docX,docY]=[$('#normal').offset().left,$('#normal').offset().top];
//计算鼠标的相对位置
let [relativeX,relativeY]=[curX-docX,curY-docY];
//放大镜的宽高
let [showWidth,showHeight]=[$('#show').width()/2,$('#show').height()/2];
//鼠标移动时，设置放大镜的位置
$('#show').css({left:`${relativeX}-${showWidth}px`,top:`${relativeY}-${showHeight}px`});
//控制放大镜只能在原图窗口内移动，不能越界
//获取当前放大镜的偏移位置
let [curPYWidth,curPYHeight]=[$('#show').position().left,$('#show').position().top];
//获取最大的框高，用于定义边界
let [maxWidth,maxHeight]=[$('#normal').width()-$('#show').width(),$('#normal').height()-$('#show').height()];
//越界时重新调整放大镜的位置
if(curPYWidth<=0){$('#show').css('left','0px')}
if(curPYWidth>=maxWidth){$('#show').css('left',`${maxWidth}px`)}
if(curPYHeight<=0){$('#show').css('top','0px')}
if(curPYHeight>=maxHeight){$('#show').css('top',`${maxHeight}px`)}
//重新获取放大镜的偏移位置
[curPYWidth,curPYHeight]=[$('#show').position().left,$('#show').position().top];
//定义放大图片的位置
let [newX,newY]=[curPYWidth*3,curPYHeight*3];
//设置放大图片的位置
$('#big').find('img').css({'left':`-${newX}px`,'top':`-${newY}px`});
})
})
// ----------------鼠标移上原始图片结束
//鼠标移出原始图片时，隐藏放大镜和右侧的图片
$('#normal').mouseleave(function(){
$('#show,#big').hide();
})
})
zuoye.css*{ margin:0;padding:0; }
#normal{width: 450px;height: 450px;border: 1px solid #000;position: fixed;top: 20px;left: 20px;}/*原始图片*/
#normal img{width: 100%;height: 100%;}
#show{width: 150px;height: 150px;background: #754930;opacity: 0.4;position: absolute;display: none;}/*放大镜长宽*/
#big{width: 450px;height: 450px;border: 1px solid #000;position: relative;left: 520px;top: 20px;overflow: hidden;}/*放大图片区域长宽*/
#big>img{position: absolute;width: 1350px;height: 1350px;}/*放大图片的长宽*/
批改老师：灭绝师太批改时间：2018-11-21 17:45:16
老师总结：每一个js效果，只要摸清楚逻辑，用起来就不难，加油！
)
)
