仿天猫商城图片放大镜效果
<!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>作业</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;}
/*此处需要设置相对位置，便于后期设置*/
</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({//小方块跟随鼠标移动而移动
'left':e.pageX-showW,
'top':e.pageY-showH
});
})
//获取鼠标在原图的内部移动
$('#normal').mousemove(function(ev){
//获取鼠标当前位置
var x=ev.clientX;
var y=ev.clientY
//获取原图窗口距离文档的偏移位置
var dx=$('#normal').offset().left;
var dy=$('#normal').offset().top;
//计算鼠标的相对位置
var sx=x-dx;
var sy=y-dy;
//给入鼠标移动，小框移动的距离
$('#show').css({
'left':sx-showW+'px',
'top':sy-showH+'px'
});
//控制小框框只能在原图窗口的范围内移动
//position()匹配元素相对父元素的偏移
//这里的偏移量以小框为主，不能使用鼠标的偏移量
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()获取匹配元素相对父元素的偏移。
var lw=$('#show').position().left;
var lh=$('#show').position().top;
//设置倍数 #normal_big img图片/#normal img原图=倍数
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>