基于jquery的商品展示放大镜

复制代码 代码如下:

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