abstract：<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>作業(yè)</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
li{list-style: none;}
a,a:hover{text-decoration: none;}
.productPic>div{float: left;margin-right: 20px;}
#normal{position: relative;}
#normal,#normal>img,#normal_big{width: 400px;height: 400px;}
#normal,#normal_big{border: 1px solid #333;margin-top: 45px;overflow: hidden;margin-left: 45px;}
#show{width: 100px;height: 100px;background-color: #666;opacity: 0.5;position: absolute;}
#normal_big{position: relative;}
#normal_big img{position: absolute;width:1600px ;height: 1600px;}
/*此處需要設(shè)置相對(duì)位置，便于后期設(shè)置*/
</style>
<script type="text/javascript">
$(function(){
var showH,showW;//顯示小框的高度 寬度
showH=$('#show').height()/2;
showW=$('#show').width()/2;
$('#normal_big').hide();
$('#normal').mouseover(function(){
$('#show').show();
$('#normal_big').show();
$(this).mousemove(function(e){
$('#show').css({//小方塊跟隨鼠標(biāo)移動(dòng)而移動(dòng)
'left':e.pageX-showW,
'top':e.pageY-showH
});
})
//獲取鼠標(biāo)在原圖的內(nèi)部移動(dòng)
$('#normal').mousemove(function(ev){
//獲取鼠標(biāo)當(dāng)前位置
var x=ev.clientX;
var y=ev.clientY
//獲取原圖窗口距離文檔的偏移位置
var dx=$('#normal').offset().left;
var dy=$('#normal').offset().top;
//計(jì)算鼠標(biāo)的相對(duì)位置
var sx=x-dx;
var sy=y-dy;
//給入鼠標(biāo)移動(dòng)，小框移動(dòng)的距離
$('#show').css({
'left':sx-showW+'px',
'top':sy-showH+'px'
});
//控制小框框只能在原圖窗口的范圍內(nèi)移動(dòng)
//position()匹配元素相對(duì)父元素的偏移
//這里的偏移量以小框?yàn)橹?，不能使用鼠?biāo)的偏移量
var show_offset_w=$('#show').position().left;
var show_offset_h=$('#show').position().top;
var maxW=$('#normal').width()-$('#show').width();
var maxH=$('#normal').height()-$('#show').height();
//上下 左右偏移位置判斷
if(show_offset_w<=0){
$('#show').css('left','0px')
}
if(show_offset_h<=0){
$('#show').css('top','0px')
}
if(show_offset_w>=maxW){
$('#show').css('left',maxW+'px');
}
if(show_offset_h>=maxH){
$('#show').css('top',maxH+'px');
}
//獲取小框的偏移位置 position()獲取匹配元素相對(duì)父元素的偏移。
var lw=$('#show').position().left;
var lh=$('#show').position().top;
//設(shè)置倍數(shù) #normal_big img圖片/#normal img原圖=倍數(shù)
var newX=lw*4;
var newY=lh*4;
$('#normal_big').find('img').css({
'left':-newX+'px',
'top':-newY+'px'
})
})
})
$('#normal').mouseleave(function(){
$('#show').hide()
$('#big').hide()
})
})
</script>
</head>
<body>
<div>
<div id="normal">
<img src="img/a.png"/>
<div id="show"></div>
</div>
<div id="normal_big">
<img src="img/a.png"/>
</div>
</div>
</body>
</html>
Correcting teacher：查無(wú)此人Correction time：2019-05-17 09:43:48
Teacher's summary：完成的不錯(cuò)，常用的css樣式可以寫到公用文件里，繼續(xù)加油。