摘要：本次實戰主要完成了圖片放大鏡的效果，通過定義原始圖片，放大鏡，放大后的圖片，然后設置放大后的圖片為原始圖片的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效果，只要摸清楚邏輯，用起來就不難，加油！

總結

以上是生活随笔為你收集整理的php 放大镜,图片放大镜效果实战总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。