<!DOCTYPE html>
<html lang="en">
<!-- 这个放大镜效果只是固定图像到左上角，一旦图片更换位置就必须修改代码 -->
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery1.8.3/jquery.min.js">
</script>
<style>
* {margin: 0; padding: 0; }
#min { 350px; border: 1px solid skyblue;}
#max { 350px; height: 350px; position: absolute; overflow: hidden; display: none;}
#inner { 100px; height: 100px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .4); display: none;}
</style>
</head>
<body>
<img src="images/loupe.jpg" id="min" alt="">
<div id="max"> <img src="images/loupe.jpg" alt=""></div>
<div id="inner"></div>
<script>
$(document).mouseover(function() {
var p = $('#min').offset();
var w = $('#min').width();
$('#max').css({
top: p.top,
left: p.left + w + 5
}).show();
}).mousemove(function(e) {
$('#inner').css({
// 在移动的同时检测边界
top: pointY(e.pageY - 50),
left: pointX(e.pageX - 50)
}).mousemove(function(e) {
$('#max').scrollTop((e.pageY-$('#min').offset().top) * 10 -175)
.scrollLeft((e.pageX-$('#min').offset().left) * 10 - 175);
}).show();
//判断鼠标是否越界，越过即隐藏遮罩层和右侧大图
if(e.pageY>247 || e.pageY<=5 || e.pageX>350 ){
$('#max').hide();
$('#inner').hide();
}
});
/*
处理边界
因为鼠标的移动是一种综合移动，同时包含了x轴和y轴的两个方向的值，
那么把X轴和Y轴都分成两个部分来计算。各半部分控制一边的边界。
--这里我用到了之前练习时候的小人移动的知识来解决这个边界问题。事实上也是不完美的，没有解决在任何位置的边界问题，
也就是说，如果这个图片移动位置了，图片改变大小了，要重写。这个说法应该叫封装吧，下次找机会修改一下。
*/
function pointY(point){
return point>70?Math.min(point,147):Math.max(point,1);
}
function pointX(point){
return point>125?Math.min(point,250):Math.max(point,1);
}
</script>
</body>
</html>
在线地址：http://www.yupinghua.com/practices/components/loupe.html