|
这两天帮朋友的网站做个放大镜，就是淘宝上的那种，两个框，一个框放小图，另外一个框放大图。本来说想从网上直接载一个拿来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; }); }); });
|