摘要：本次實戰(zhàn)主要完成了圖片放大鏡的效果，通過定義原始圖片，放大鏡，放大后的圖片，然后設(shè)置放大后的圖片為原始圖片的3倍，通過鼠標(biāo)移上顯示放大后的圖片，并通過位移計算當(dāng)前放大鏡的位置，設(shè)置放大后圖片的偏移量，來顯示放大后的圖片效果。代碼如下：<!DOCTYPE html> <html> <head> <me
本次實戰(zhàn)主要完成了圖片放大鏡的效果，通過定義原始圖片，放大鏡，放大后的圖片，然后設(shè)置放大后的圖片為原始圖片的3倍，通過鼠標(biāo)移上顯示放大后的圖片，并通過位移計算當(dāng)前放大鏡的位置，設(shè)置放大后圖片的偏移量，來顯示放大后的圖片效果。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片放大鏡效果</title>
<link rel="stylesheet" href="static/css/zuoye.css" type="text/css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#big').hide();//默認(rèn)隱藏放大后的圖片
// ----------------鼠標(biāo)移上原始圖片開始
$('#normal').mouseover(function(){ //鼠標(biāo)移上原始圖片時
$('#show,#big').show();//鼠標(biāo)移上時，顯示兩張圖片
$(this).mousemove(function(curMove){
//實時計算原始圖片上小方塊的移動距離，鼠標(biāo)位于小方塊的中間位置
$('#show').css({
'left':curMove.pageX-$('#show').width()/2,
'top':curMove.pageY-$('#show').height()/2
})
})
//鼠標(biāo)在原始圖片上的移動事件
$('#normal').mousemove(function(e){
//獲取鼠標(biāo)當(dāng)前位置
let [curX,curY]=[e.clientx,e.clienty];
//獲取原圖窗口距離文檔的偏移位置
let [docX,docY]=[$('#normal').offset().left,$('#normal').offset().top];
//計算鼠標(biāo)的相對位置
let [relativeX,relativeY]=[curX-docX,curY-docY];
//放大鏡的寬高
let [showWidth,showHeight]=[$('#show').width()/2,$('#show').height()/2];
//鼠標(biāo)移動時，設(shè)置放大鏡的位置
$('#show').css({left:`${relativeX}-${showWidth}px`,top:`${relativeY}-${showHeight}px`});
//控制放大鏡只能在原圖窗口內(nèi)移動，不能越界
//獲取當(dāng)前放大鏡的偏移位置
let [curPYWidth,curPYHeight]=[$('#show').position().left,$('#show').position().top];
//獲取最大的框高，用于定義邊界
let [maxWidth,maxHeight]=[$('#normal').width()-$('#show').width(),$('#normal').height()-$('#show').height()];
//越界時重新調(diào)整放大鏡的位置
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];
//設(shè)置放大圖片的位置
$('#big').find('img').css({'left':`-${newX}px`,'top':`-${newY}px`});
})
})
// ----------------鼠標(biāo)移上原始圖片結(jié)束
//鼠標(biāo)移出原始圖片時，隱藏放大鏡和右側(cè)的圖片
$('#normal').mouseleave(function(){
$('#show,#big').hide();
})
})
</script>
</head>
<body>
<!-- 原始圖片 -->
<div id="normal">
<img src="static/images/4.jpg">
<div id="show"></div>
</div>
<!-- 放大效果的圖片 -->
<div id="big">
<img src="static/images/4.jpg">
</div>
</body>
</html>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;}/*放大圖片區(qū)域長寬*/
#big>img{position: absolute;width: 1350px;height: 1350px;}/*放大圖片的長寬*/
批改老師：滅絕師太批改時間：2018-11-21 17:45:16
老師總結(jié)：每一個js效果，只要摸清楚邏輯，用起來就不難，加油！