php 放大镜,放大镜放大图片效果

摘要：html>

html>

*{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;}

$(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();

})

})

请问老师这里为啥是负值呀，有点没搞清楚哇

$('.bigger').find('img').css({

'left':-bx+'px',

'top':-by+'px'

})

批改老师：灭绝师太批改时间：2019-02-28 09:28:18

老师总结：因为小框的偏移位置的起始值是左上角呀,移动的话就是向右移动