基于jquery的商品展示放大镜
作者：
这两天帮朋友的网站做个放大镜，就是淘宝上的那种，两个框，一个框放小图，另外一个框放大图。本来说想从网上直接载一个拿来Hack，但是找好半天都没有找到，看了看JQ的插件也好像不对，干脆就自己写了。
直接上代码吧（一共也才100来行，小东西）
$(document).ready(function() {
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px";
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px";
$("#oriImage").bind('mouseleave', function(event) {
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px";
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px";
});
$("#oriImage").bind('mouseover', function(event) {
$("#oriImage").bind('mousemove', function(event) { // 在鼠标移动至操作层以后才LazyBind鼠标移动事件
var mouseX, mouseY;
if (navigator.userAgent.indexOf("MSIE 6.0") >= 0) { //在IE6以上各版本下和GOOGLE浏览器下
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
} else {//在FF浏览器下需要追加像素作为偏移量单位而不能是其他
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
}
var playOffsetX = 0 - mouseX / _xPercent(_el("oriImage").style.width, _el("biggerPic").style.width);
var playOffsetY = 0 - mouseY / _yPercent(_el("oriImage").style.height, _el("biggerPic").style.height);
//当大图X坐标大于0，也就是到达最左边距时重置为0,当图片的X偏移量已经超出显示的容器时，则重置为其X偏移量为图片与容器之差的负数
if (playOffsetY < 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2
&& playOffsetX > 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) {
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 + "px" :
playOffsetX + getOffsetNumber(_el("container").style.width) / 2 > 0 ? 0 + "px" : playOffsetX + getOffsetNumber(_el("container").style.width) / 2 + "px";
return;
}
//当大图Y坐标大于0，也就是到达最上边距时重置为0，当图片的Y偏移量已经超出显示的容器时，则重置为其Y偏移量为图片与容器之差的负数
if (playOffsetX < 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2
&& playOffsetY > 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) {
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 + "px" :
playOffsetY + getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 + "px" : playOffsetY + getOffsetNumber(_el("container").style.height) / 2 + "px";
return;
}
if (playOffsetY >= 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2
&& playOffsetX >= 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2) {
//alert(0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2);
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 + "px" :
playOffsetX + getOffsetNumber(_el("container").style.width) / 2 > 0 ? 0 + "px" : playOffsetX + getOffsetNumber(_el("container").style.width) / 2 + "px";
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 + "px" :
playOffsetY + getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 + "px" : playOffsetY + getOffsetNumber(_el("container").style.height) / 2 + "px";
return;
}
return;
});
});
});
嗯上面就基本上是大体的逻辑了，这里稍微解释一下，
1 大家应该注意到了，还是有很多CSS HACK的地方，现在这个东西是兼容FF3.0，IE 6，
7 ，8 以及chrome的，其他的还没有来得及试验
2 开发当中当放大以后的图片也就是ID为biggerPic的图片在移动到边界的时候要做特殊
处理，左边和上边就很简单了，直接归零，但右边和下边就稍微麻烦一点，需要计算当前
图片相对于容器（也就是ID为container的DIV）的偏移量，这里有一个问题，如果想以一
个固定的值去重新覆盖掉图片距离容器的上边距或右边距的时候，当用户浏览会发现有类
似“跳帧”的现象，原因是因为我用来判断当前图片的偏移量时用到了鼠标相对于操作容
器（也就是ID为“oriImage”的DIV）的距离作为判断的条件，事后发现这种做法不够精
确，而且会造成“跳帧”，遂放弃了这种方案。现在采用的是分别判断鼠标位置的方法，
从而触发不同的逻辑，代码上写的很清楚了。
3 之所以在页面加载完毕以及鼠标离开操作层的时候将大图的位置设置为最右下方，是
因为为了避免第二点中提到的“跳帧”而用的分条件判断，在第一时间用户触发鼠标移动
事件的时候，如果由操作层的右侧或是下侧进入的话，就会有不正确的显示，这估计也是
很多网上直接把放大镜层在加载的时候设置为hidden的原因，我觉得这仍是一个BUG，希
望有大虾指点正确的做法。
4 HTML的写法如下：
下面是操作层以及其中放的小图的写法，CSS没有抽出来，最近很懒
<div id="oriImage" style="cursor:crosshair; background-color: Yellow; overflow:hidden; width: 150px; height: 150px;">
<img id="oriImg" src="3.jpg" style="width:150px;height:150px;" alt="鼠标划过查看细节" /><!--这个图片ID可以任意指定--></div>
下面是效果层以及其中放的大图的写法，CSS没有抽出来，真的很懒
<div id="container" style="position: absolute; top: 200px; left: 450px; width: 250px;height: 250px; z-index: 10; overflow:hidden;">
<img id="biggerPic" src="1.jpg" style="width:1500px;height:1500px;" alt="查看产品细节" /></div>
PS: 各个HTML元素的ID除了操作层中的图片也就是“oriImg”之外，修改的话要修改JS.
放大镜层的样式必须添加一个为“overflow:hidden;”这个本应该做到JS里面去，懒了一下.
好了东西讲完了，现在补充一下，本人刚涉足前端，很多不足，大家多多包涵，
东西虽然拙劣，但好歹是自己敲的，日后有用到的同学可以直接问我要.
复制代码 代码如下:
$(document).ready(function() {
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px";
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px";
$("#oriImage").bind('mouseleave', function(event) {
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px";
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px";
});
$("#oriImage").bind('mouseover', function(event) {
$("#oriImage").bind('mousemove', function(event) { // 在鼠标移动至操作层以后才LazyBind鼠标移动事件
var mouseX, mouseY;
if (navigator.userAgent.indexOf("MSIE 6.0") >= 0) { //在IE6以上各版本下和GOOGLE浏览器下
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
} else {//在FF浏览器下需要追加像素作为偏移量单位而不能是其他
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
}
var playOffsetX = 0 - mouseX / _xPercent(_el("oriImage").style.width, _el("biggerPic").style.width);
var playOffsetY = 0 - mouseY / _yPercent(_el("oriImage").style.height, _el("biggerPic").style.height);
//当大图X坐标大于0，也就是到达最左边距时重置为0,当图片的X偏移量已经超出显示的容器时，则重置为其X偏移量为图片与容器之差的负数
if (playOffsetY < 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2
&& playOffsetX > 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) {
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 + "px" :
playOffsetX + getOffsetNumber(_el("container").style.width) / 2 > 0 ? 0 + "px" : playOffsetX + getOffsetNumber(_el("container").style.width) / 2 + "px";
return;
}
//当大图Y坐标大于0，也就是到达最上边距时重置为0，当图片的Y偏移量已经超出显示的容器时，则重置为其Y偏移量为图片与容器之差的负数
if (playOffsetX < 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2
&& playOffsetY > 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) {
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 + "px" :
playOffsetY + getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 + "px" : playOffsetY + getOffsetNumber(_el("container").style.height) / 2 + "px";
return;
}
if (playOffsetY >= 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2
&& playOffsetX >= 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2) {
//alert(0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2);
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 + "px" :
playOffsetX + getOffsetNumber(_el("container").style.width) / 2 > 0 ? 0 + "px" : playOffsetX + getOffsetNumber(_el("container").style.width) / 2 + "px";
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 + "px" :
playOffsetY + getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 + "px" : playOffsetY + getOffsetNumber(_el("container").style.height) / 2 + "px";
return;
}
return;
});
});
});
嗯上面就基本上是大体的逻辑了，这里稍微解释一下，
1 大家应该注意到了，还是有很多CSS HACK的地方，现在这个东西是兼容FF3.0，IE 6，
7 ，8 以及chrome的，其他的还没有来得及试验
2 开发当中当放大以后的图片也就是ID为biggerPic的图片在移动到边界的时候要做特殊
处理，左边和上边就很简单了，直接归零，但右边和下边就稍微麻烦一点，需要计算当前
图片相对于容器（也就是ID为container的DIV）的偏移量，这里有一个问题，如果想以一
个固定的值去重新覆盖掉图片距离容器的上边距或右边距的时候，当用户浏览会发现有类
似“跳帧”的现象，原因是因为我用来判断当前图片的偏移量时用到了鼠标相对于操作容
器（也就是ID为“oriImage”的DIV）的距离作为判断的条件，事后发现这种做法不够精
确，而且会造成“跳帧”，遂放弃了这种方案。现在采用的是分别判断鼠标位置的方法，
从而触发不同的逻辑，代码上写的很清楚了。
3 之所以在页面加载完毕以及鼠标离开操作层的时候将大图的位置设置为最右下方，是
因为为了避免第二点中提到的“跳帧”而用的分条件判断，在第一时间用户触发鼠标移动
事件的时候，如果由操作层的右侧或是下侧进入的话，就会有不正确的显示，这估计也是
很多网上直接把放大镜层在加载的时候设置为hidden的原因，我觉得这仍是一个BUG，希
望有大虾指点正确的做法。
4 HTML的写法如下：
下面是操作层以及其中放的小图的写法，CSS没有抽出来，最近很懒
<div id="oriImage" style="cursor:crosshair; background-color: Yellow; overflow:hidden; width: 150px; height: 150px;">
<img id="oriImg" src="3.jpg" style="width:150px;height:150px;" alt="鼠标划过查看细节" /><!--这个图片ID可以任意指定--></div>
下面是效果层以及其中放的大图的写法，CSS没有抽出来，真的很懒
<div id="container" style="position: absolute; top: 200px; left: 450px; width: 250px;height: 250px; z-index: 10; overflow:hidden;">
<img id="biggerPic" src="1.jpg" style="width:1500px;height:1500px;" alt="查看产品细节" /></div>
PS: 各个HTML元素的ID除了操作层中的图片也就是“oriImg”之外，修改的话要修改JS.
放大镜层的样式必须添加一个为“overflow:hidden;”这个本应该做到JS里面去，懒了一下.
好了东西讲完了，现在补充一下，本人刚涉足前端，很多不足，大家多多包涵，
东西虽然拙劣，但好歹是自己敲的，日后有用到的同学可以直接问我要.