可以直接复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
* { margin:0px; padding:0px;}
#box { width:400px; height:400px; margin:100px auto; position:relative;}
#box .simg {width:400px; height:400px; position:relative;}
#box .simg span.move { width:150px; height:150px; background:red; position:absolute; top:0; left:0; display:block; filter:alpha(opacity=50); opacity:0.5; display:none;}
#box .simg span.shade { width:100%; height:100%; position:absolute; top:0; left:0;filter:alpha(opacity=40); opacity:0.4;}
#box .bimg { width:400px; height:400px; position:absolute; left:430px; top:0px; overflow:hidden; display:none;}
#box .bimg img { position:absolute; }
.simg img{max-width: 400px;max-height: 400px}
</style>
</head>
<body>
<div id="box">
<div class="simg">
<img src="http://pic1.ymatou.com/G02/shangou/M05/85/D4/CgvUBVuCW1eAbzXXAAGPjpReFgk122_1_1_n_w_o.jpg"/>
<span class="move"></span>
<span class="shade"></span>
</div>
<div class="bimg"><img src="http://pic1.ymatou.com/G02/shangou/M05/85/D4/CgvUBVuCW1eAbzXXAAGPjpReFgk122_1_1_n_w_o.jpg"/></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$(".shade").hover(function(){
$(".move").show();
$(".bimg").show();
},function(){
$(".move").hide();
$(".bimg").hide();
});
$(".shade").mousemove(function(e){
var l=e.clientX;
var t=e.clientY;
var _top=t-$("#box").offset().top-$(".move").height()/2+"px";
var _left=l-$("#box").offset().left-$(".move").width()/2+"px";
//不让从上面和下面出去
if(parseInt(_top)<0){
_top=0+'px';
}else if(parseInt(_top)>parseInt($("#box").height()-$(".move").height())){
_top=parseInt($("#box").height()-$(".move").height())+"px";
}
//不让从两边出去
if(parseInt(_left)<0){
_left=0+"px";
}else if(parseInt(_left)>parseInt($("#box").width()-$(".move").width())){_left=parseInt($("#box").width()-$(".move").width())+'px';}
$(".move").css({top:_top,left:_left});
//小图可滑动的比例
var hd_x=parseInt(_left)/parseInt($("#box").width()-$(".move").width());
var hd_y=parseInt(_top)/parseInt($("#box").height()-$(".move").height());
//大图对应的top left
var bm_left=($(".bimg img").width()-$(".bimg").width())*hd_x;
var bm_top=($(".bimg img").height()-$(".bimg").height())*hd_y;
$(".bimg img").css({top:-bm_top,left:-bm_left});
});
});
</script>
</html>