摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>照片墻</title> <link rel="stylesheet" type="text/css&quo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片墻</title>
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/style7.css">
<script type="text/javascript" src="static/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$('#big').hide()
$('#normal').mouseover(function(){
$('#show').show()
$('#big').show()
$(this).mousemove(function(yd){
// 小方塊跟隨鼠標移動而移動
$('#show').css({
'left':yd.pageX-$('#show').width()/2,
'top':yd.pageY-$('#show').height()/2
})
})
$('#normal').mousemove(function(e){
//獲取鼠標的當前位置
var x=e.clientx
var y=e.clienty
//獲取原圖窗口距離文檔的偏移位置
var dx=$('#normal').offset().left;
var dy=$('#normal').offset().top;
//計算鼠標的相對位置
var sx=x-dx
var sy=y-dy
//獲取小框的寬高
var mw=$('#show').width()/2
var mh=$('#show').height()/2
//給入鼠標移動，小框移動的距離
$('#show').css({left:sx-mw+'px',top:sy-mh+'px'})
//控制小框只能在原圖窗口的范圍移動
//獲取小框的偏移位置
var lw=$('#show').position().left
var lh=$('#show').position().top
var maxW=$('#normal').width()-$('#show').width()
var maxH=$('#normal').height()-$('#show').height()
//左
if(lw<=0){$('#show').css('left','0px')}
//右
if(lw>=maxW){$('#show').css('left',maxW+'px')}
//上
if(lh<=0){$('#show').css('top','0px')}
//下
if(lh>=maxH){$('#show').css('top',maxH+'px')}
//獲取小框的偏移位置
var lw=$('#show').position().left
var lh=$('#show').position().top
var newX=lw*3
var newY=lh*3
$('#big').find('img').css({
'left':-lw*3+'px',
'top':-lh*3+'px'
})
})
})
$('#normal').mouseleave(function(){
$('#show').hide()
$('#big').hide()
})
})
</script>
</head>
<body>
<div id="normal">
<img src="static/images/32.jpg">
<div id="show"></div>
</div>
<div id="big">
<img src="static/images/32.jpg">
</div>
</body>
</html>*{margin: 0px;padding: 0px;}
#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;} /*放大鏡區(qū)域的長寬*/
#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;} /*放大區(qū)域內部圖片的長寬*/
/*放大鏡內部圖片的長寬/展示圖 = 放大鏡長寬/放大鏡區(qū)域的長寬*/通過計算展示圖到窗口left和top的距離,小框到到窗口left和top的距離，展示圖的寬度，小框的寬度，相減來確定鎖定小框移動范圍。通過小框的偏移位置來實現(xiàn)圖片放大效果
批改老師：天蓬老師批改時間：2018-12-31 22:35:34
老師總結：var x=e.clientx , 其實這里用let x = e.clientx更合適 , 想一下這是為什么?