php 放大镜,图片放大镜效果实战总结

摘要：本次实战主要完成了图片放大镜的效果，通过定义原始图片，放大镜，放大后的图片，然后设置放大后的图片为原始图片的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效果，只要摸清楚逻辑，用起来就不难，加油！