abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href=""/>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
.normal{height: 350px;width: 350px;position: fixed;top: 30px;left: 30px;border: 1px solid #000000;}
.normal img{height: 350px;width: 350px;}
.area{height: 100px;width: 100px;background:#CCCCCC;opacity: 0.4;position: absolute;}
.bigger{height: 350px;width: 350px;border: 1px solid #000000;position: relative;top: 30px;left: 410px;overflow: hidden;}
.bigger img{height: 1150px;width:1150px;position: absolute;}
</style>
<body>
<div class="normal">
<img src="1.jpg" alt="" />
<div class="area"></div>
</div>
<div class="bigger">
<img src="1.jpg"/>
</div>
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.area').hide();
$('.bigger').hide();
$('.normal').mouseover(function(){
$('.area').show();
$('.bigger').show();
//小方块跟随鼠标移动而移动
$('.normal').mousemove(function(xy){
$('.area').css({
'left':xy.pageX-$('.area').width()/2,
'top':xy.pageY-$('.area').height()/2
})
})
$('.normal').mousemove(function(e){
//获取鼠标的当前位置
var x=e.clientX;
var y=e.clientY;
//获取原图窗口距文档的偏移距离 offset()方法
var nx=$('.normal').offset().left;
var ny=$('.normal').offset().top;
//获取鼠标相对与原图窗口的位置
var sx=x-nx;
var sy=y-ny;
//鼠标相对小框的一半
var ax=$('.area').width()/2;
var ay=$('.area').height()/2;
//鼠标移动时小框移动的距离
$('.area').css({
left:sx-ax+'px',
top:sy-ay+'px'
})
//获取小框的偏移位置
var px=$('.area').position().left;
var py=$('.area').position().top;
//获取右边框（边框最大宽度）的位置
var maxw=$('.normal').width()-$('.area').width();
//获取下边框（边框最大高度）的位置
var maxh=$('.normal').height()-$('.area').height();
//鼠标超过左边框时，left=0
if(px<=0){
$('.area').css('left','0px')
}
//鼠标超过上边框时，top=0
if(py<=0){
$('.area').css('top','0px')
}
//鼠标超过最大宽度（右边框）时，left=maxw
if(px>=maxw){
$('.area').css('left',maxw+'px')
}
//鼠标超过最大高度（下边框）时，top=maxh
if(py>=maxh){
$('.area').css('top',maxh+'px')
}
//获取小框的偏移位置
var px=$('.area').position().left;
var py=$('.area').position().top;
//当前小框的偏移位置*3作为放大后图片的偏移位置
var bx=px*3;
var by=py*3;
$('.bigger').find('img').css({
'left':-bx+'px',
'top':-by+'px'
})
})
})
$('.normal').mouseleave(function(){
$('.area').hide();
$('.bigger').hide();
})
})
</script>
</html>请问老师这里为啥是负值呀，有点没搞清楚哇
$('.bigger').find('img').css({
'left':-bx+'px',
'top':-by+'px'
})
Correcting teacher：灭绝师太Correction time：2019-02-28 09:28:18
Teacher's summary：因为小框的偏移位置的起始值是左上角呀,移动的话就是向右移动