看之前搜公众号：web小小白 有助于理解 - -
这段代码我哩哩啦啦写了三天多，平时都有活今天忙里偷闲想起之前放大镜这个功能写了一半（我是分两块写的，
先是让module就是那个遮罩层能自由的在图片上跟随鼠标走，剩下的就简单了,遮罩层的left、top乘以一个固定系数就是‘放大图片’的left、top）。
好了我的思路就是：
只需要一张图片，这张图片像素要大一点，先以缩小的方式展示，
然后鼠标移上去之后，在右侧有一个div，里面也放着一个src相同的img，只不过这个img不再是缩小的了。ok 这样就够了！
写之前先复习一下：（如图）
记住上面的图
上码
HTML
<div class="content">
<img class="small" src="img/01.png" width="300" />
<div class="module"></div>
<div class="large">
<img src="img/01.png" alt=""/>
</div>
</div>
css
div.content{
overflow: hidden;
position: relative;
}
img.small{
float: left;
border:1px solid blue;
}
div.large{
float: left;
width:300px;
height:300px;
overflow: hidden;
position: relative;/**/
}
div.large>img{
width:600px;
display: none;
position:absolute;/**/
}
div.module{
width:150px;
height:150px;
background-color: rgba(255,255,255,.3);
border:1px solid #666666;
position:absolute ;
top:0;
left:0;
display: none;
}
div.module:hover{
cursor: move;
}
js
$(\'.content\').mousemove(function(e){
var mx = e.pageX-$(this).offset().left;
var my = e.pageY-$(this).offset().top;
// 让鼠标在module正中间
var left = mx-$(\'.module\').width()/2;
var top = my-$(\'.module\').height()/2;
if(mx>0&&my>0&&mx<$(\'.small\').width()&&my<$(\'.small\').height()){
// 防止溢出
var L = (left<0)?0:(left>$(\'.small\').width()-$(\'.module\').width())?$(\'.small\').width()-$(\'.module\').width():left;
var T = (top<0)?0:(top>$(\'.small\').height()-$(\'.module\').height())?$(\'.small\').height()-$(\'.module\').height():top;
$(\'div.module\').css(\'display\',\'block\').css(\'left\',L+\'px\').css(\'top\',T+\'px\');
// 显示放大照片
var largeLeft = L*$(\'.large\').width()/$(\'.module\').width();//L*(300/150);
var largeTop = T*$(\'.large\').height()/$(\'.module\').height();//T*(300/150);
$(\'.large>img\').css(\'display\',\'block\').css(\'left\',0-largeLeft+\'px\').css(\'top\',0-largeTop+\'px\');
为什么left：0-largeLeft？
因为你好好想想，你鼠标往左移动时候，div.large中的图片却是向右移动的，鼠标向右移动时，div.large中的图片是向左动的。
鼠标向上移动时，div.large中的图片是向下动的。
鼠标向下移动时，div.large中的图片是向上动的。
所以要用0减去！
}
else{
$(\'div.module\').css(\'display\',\'none\');
// 隐藏放大照片
$(\'.large>img\').css(\'display\',\'none\');
}
})
是不是很简单，我当时在避免.module溢出的时候费了些时间，
当时我很蠢单独把每个方向都拿出来并且在每个方向下面设置.module的left和top；导致鼠标在移动的时候代码判断使移动发生了冲突，
并未达到我想要的效果。
想想虽然要每个方向都要考虑，但是没必要每判断一次给就给.module赋一次值。
把left和top单独拿出来考虑，最后在把left、top赋值给.module 如下，更好。
// 防止溢出
var L = (left<0)?0:(left>$(\'.small\').width()-$(\'.module\').width())?$(\'.small\').width()-$(\'.module\').width():left;
var T = (top<0)?0:(top>$(\'.small\').height()-$(\'.module\').height())?$(\'.small\').height()-$(\'.module\').height():top;
$(\'div.module\').css(\'display\',\'block\').css(\'left\',L+\'px\').css(\'top\',T+\'px\');
源码：复制粘贴~换个img换个jquery文件 看效果
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<style>
div.content{
overflow: hidden;
position: relative;
}
img.small{
float: left;
border:1px solid blue;
}
div.large{
float: left;
width:300px;
height:300px;
overflow: hidden;
position: relative;/**/
}
div.large>img{
width:600px;
display: none;
position:absolute;/**/
}
div.module{
width:150px;
height:150px;
background-color: rgba(255,255,255,.3);
border:1px solid #666666;
position:absolute ;
top:0;
left:0;
display: none;
}
div.module:hover{
cursor: move;
}
</style>
</head>
<body>
<div class="content">
<img class="small" src="img/01.png" width="300" />
<div class="module"></div>
<div class="large">
<img src="img/01.png" alt=""/>
</div>
</div>
<script src="js/jquery-2.1.0.js"></script>
<script>
$(\'.content\').mousemove(function(e){
// console.log($(this).offset().top);
// console.log($(this).offset().left);
// console.log(e.pageX);
// console.log(e.pageY);
var mx = e.pageX-$(this).offset().left;
var my = e.pageY-$(this).offset().top;
// 让鼠标在module正中间
var left = mx-$(\'.module\').width()/2;
var top = my-$(\'.module\').height()/2;
if(mx>0&&my>0&&mx<$(\'.small\').width()&&my<$(\'.small\').height()){
// 防止溢出
var L = (left<0)?0:(left>$(\'.small\').width()-$(\'.module\').width())?$(\'.small\').width()-$(\'.module\').width():left;
var T = (top<0)?0:(top>$(\'.small\').height()-$(\'.module\').height())?$(\'.small\').height()-$(\'.module\').height():top;
$(\'div.module\').css(\'display\',\'block\').css(\'left\',L+\'px\').css(\'top\',T+\'px\');
//// 避免module左溢出
// if(mx>0&&mx<$(\'.module\').width()/2){
// $(\'div.module\').css(\'display\',\'block\').css(\'left\',\'0px\').css(\'top\',top+\'px\');
// }
//// 避免module右溢出
// if(mx>$(\'.small\').width()-$(\'.module\').width()/2&&mx<$(\'.small\').width()){
// $(\'div.module\').css(\'display\',\'block\').css(\'left\',$(\'.small\').width()-$(\'.module\').width()+\'px\').css(\'top\',top+\'px\');
// }
//// 避免module上溢出
// if(my>0&&my<$(\'.module\').height()/2){
// $(\'div.module\').css(\'display\',\'block\').css(\'left\',left+\'px\').css(\'top\',\'0px\');
// }
//// 避免module下溢出
// if(my>$(\'.small\').height()-$(\'.module\').height()/2&&mx<$(\'.small\').height()){
// $(\'div.module\').css(\'display\',\'block\').css(\'left\',left+\'px\').css(\'top\',$(\'.small\').height()-$(\'.module\').height()+\'px\');
// }
// 显示放大照片
var largeLeft = L*$(\'.large\').width()/$(\'.module\').width();//L*(300/150);
var largeTop = T*$(\'.large\').height()/$(\'.module\').height();//T*(300/150);
$(\'.large>img\').css(\'display\',\'block\').css(\'left\',0-largeLeft+\'px\').css(\'top\',0-largeTop+\'px\');
}
else{
$(\'div.module\').css(\'display\',\'none\');
// 隐藏放大照片
$(\'.large>img\').css(\'display\',\'none\');
}
})
</script>
</body>
</html>
谢谢关注！
自己封装吧 - -