放大镜原理分析及jquery实现

今天心血来潮，逛某宝的时候，突然想自个儿倒腾一下放大镜的实现。

放大镜的构成：是由一张小图片和一张等比例的大图片构成的，当鼠标在小图片上移动时，大图片显示对应的地方。

放大镜的本质原理是：当鼠标在小图片上移动时，通过捕捉鼠标在小图片的位置，定位大图片的相应位置。

包含的元素：小图，等比例的大图，放大镜，大图窗口四个要素。

制作放大镜所需要的技术要点：

mouseover 事件，鼠标移到指定的对象时触发；

objsmallBox.on('mouseover',function(){
objFloatBox.css({
display : 'block'
}) ;
objBigBox.css({
display : 'block'
}) ;
});

mouseout事件，鼠标从指定的对象移除触发的事件；

objsmallBox.on('mouseout',function(){
objFloatBox.hide();
objBigBox.hide();
});

mousemove事件，鼠标指针移动时触发的事件。

objsmallBox.on('mousemove',function(e){

});

其中，mousemove事件是最重要的，并且是需要计算的，以下的js代码都是这个事件响应函数中的。

HTML结构构成是：一个demo div 包含两个子 div，子div里边分别包含小图和大图，另外，第一个子div里还包含一个放大镜div。

<div id="demo">
<div id="small-box">
<div id="float-box"> <span style="color:#ff0000;"><strong>这是放大镜div</strong></span>
</div>
<img src="image/Penguins-small.jpg"> <span style="color:#ff0000;"><strong>这是小图</strong></span>
</div>
<div id="big-box"><span style="color:#ff0000;"> <strong>这是大图窗口</strong></span>
<img src="image/Penguins.jpg" id="bigimg">  <strong><span style="color:#ff0000;">这是大图</span></strong>
</div>
</div>

另外，放大镜div和大图窗口是成比例的，现贴出css如下

#demo{
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #CCCCCC;
}
#float-box{
display: none;
width:160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #CCCCCC;
-ms-filter: ;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#big-box{
display: none;
position: absolute;
top:0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #CCCCCC;
z-index: 1;
}
#big-box img{
position: absolute;
z-index: 5;
}
#small-box{
position: relative;
z-index: 1;
}

接下来就到了最重要的js部分了，我们知道，dom直接的位置计算关系如下：



offsetLeft 是当前元素与父元素的偏移左距离；offsetTop是当前元素与父元素的偏移顶部距离；offsetWidth 是元素的宽（包含padding和border）；offsetHeight是元素的高（包含padding和border）.event.clientX是鼠标在页面上的X坐标位置，event.clientY是鼠标在页面上的Y坐标位置。

offsetLeft是只读的，不能修改；如果要修改元素的左位移，只能修改它的style.left 的值，另外，style.left的值需要事先设定，否则拿到的是空的。

于是，我们现在来分析一下原理。



上述这张图想说明的是，鼠标向左移动多少，放大镜就跟着移动多少，同时大图片就向右移动多少（成比例）。

其中，小图是A，大图是B，放大镜是C，大图窗口是D，放大镜离小图的距离是X，大图窗口离大图的距离是Y。于是就有了上述的公式。现在求的是Y的值。

已知的是：

放大镜的宽高，大图窗口的宽高。

X = 鼠标的位移 - demo的offsetLeft - 小图的offsetLeft - 放大镜宽度/2

其中，A 、B 、C、 D的宽度都是已知的，于是可以求出

Y = X（B-D）/(A-C)

var left = e.clientX - objDemo.offset().left - objsmallBox.offset().left - objFloatBox.outerWidth()/2;
var top = e.clientY - objDemo.offset().top - objsmallBox.offset().top - objFloatBox.outerWidth()/2;

if(left<0){
left = 0;
}else if(left>objsmallBox.outerWidth() - objFloatBox.outerWidth()){
left = objsmallBox.outerWidth() - objFloatBox.outerWidth();
}

if(top<0){
top = 0;
}else if(top>objsmallBox.outerHeight() - objFloatBox.outerWidth()){
top = objsmallBox.outerHeight() - objFloatBox.outerHeight();
}
objFloatBox.css({ //于是放大镜就跟随鼠标了
left : left +"px",
top : top +"px"
});

var precentX = left/(objsmallBox.outerWidth() - objFloatBox.outerWidth());
var precentY = top/(objsmallBox.outerHeight() - objFloatBox.outerHeight());

var bx = precentX*(objBigBoxImage.outerWidth()-objBigBox.outerWidth());
var by = precentY*(objBigBoxImage.outerHeight() - objBigBox.outerHeight());

由于放大镜可能超出小图，于是对left小于0 及大于差值的情况进行了硬性约束。

另外由于鼠标移动的位置和大图移动的位置是相反的，所以，给大图设置的偏移是负值。

objBigBoxImage.css({
left : -bx + "px",
top : -by+"px"
});

于是，这样放大镜就这样完成了，是不是很简单那。