js实现简单放大镜功能

1、offsetLeft,offsetTop,offsetWidth,offsetHeight,event.clientX,event.clientY

2、offsetLeft与style.left的区别

补充：xxx.style.xxx只能获取行内样式，若行内没有定义，则获取到空字符串。

 

3、放大镜功能实现的核心逻辑

var _event = window.event;
//让鼠标始终在蒙版的中间
var left = _event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
var top = _event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;

//限制蒙版不能超出图片的范围					
if(left < 0){
 left=0;
}else if(left > objSmallBox.offsetWidth-objFloatBox.offsetWidth){
 left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;
}
if(top<0){
 top=0;
}else if(top > objSmallBox.offsetHeight-objFloatBox.offsetHeight){
 top = objSmallBox.offsetHeight-objFloatBox.offsetHeight;
}
					
//让蒙版随着鼠标的移动而移动
 objFloatBox.style.left=left+"px";
 objFloatBox.style.top=top+"px";
					
					
//计算对应放大镜的位置
//公式：放大镜的left=-蒙版的left*（大照片的宽度-放大镜的宽度）/（蒙版所在照片的宽度-蒙版的宽度）
objBigBoxImage.style.left=-(left*(objBigBoxImage.offsetWidth-objBigBox.offsetWidth)/(objSmallBox.offsetWidth-objFloatBox.offsetWidth))+"px";
objBigBoxImage.style.top=-(top*(objBigBoxImage.offsetHeight-objBigBox.offsetHeight)/(objSmallBox.offsetHeight-objFloatBox.offsetHeight))+"px";
}
}