需求
电商网站上最常见，最常用的插件莫过于放大镜特效了。为了避免重复造轮子，我这边整理了一个蛮好用的jquery放大镜插件。开箱即用，很便捷。
插件核心代码
(
function($) {
$.fn.jqueryzoom =
function(options) {
var settings = {
xzoom:
200,
yzoom:
200,
offset:
10,
position:
"right",
lens:
1,
preload:
1
};
if (options) {
$.extend(settings, options);
}
var noalt =
'';
$(
this).hover(
function() {
var imageLeft =
this.offsetLeft;
var imageRight =
this.offsetRight;
var imageTop = $(
this).get(
0).offsetTop;
var imageWidth = $(
this).children(
'img').get(
0).offsetWidth;
var imageHeight = $(
this).children(
'img').get(
0).offsetHeight;
noalt = $(
this).children(
"img").attr(
"alt");
var bigimage = $(
this).children(
"img").attr(
"jqimg");
$(
this).children(
"img").attr(
"alt",
'');
if ($(
"div.zoomdiv").get().length ==
0) {
$(
this).after(
"<div class='zoomdiv'><img class='bigimg' src='" + bigimage +
"'/></div>");
$(
this).append(
"<div class='jqZoomPup'> </div>");
}
if (settings.position ==
"right") {
if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width) {
leftpos = imageLeft - settings.offset - settings.xzoom;
}
else {
leftpos = imageLeft + imageWidth + settings.offset;
}
}
else {
leftpos = imageLeft - settings.xzoom - settings.offset;
if (leftpos <
0) {
leftpos = imageLeft + imageWidth + settings.offset;
}
}
$(
"div.zoomdiv").css({ top: imageTop, left: leftpos });
$(
"div.zoomdiv").width(settings.xzoom);
$(
"div.zoomdiv").height(settings.yzoom);
$(
"div.zoomdiv").show();
if (!settings.lens) {
$(
this).css(
'cursor',
'crosshair');
}
$(document.body).mousemove(
function(e) {
mouse =
new MouseEvent(e);
var bigwidth = $(
".bigimg").get(
0).offsetWidth;
var bigheight = $(
".bigimg").get(
0).offsetHeight;
var scaley =
'x';
var scalex =
'y';
if (
isNaN(scalex) |
isNaN(scaley)) {
var scalex = (bigwidth / imageWidth);
var scaley = (bigheight / imageHeight);
$(
"div.jqZoomPup").width((settings.xzoom) / scalex);
$(
"div.jqZoomPup").height((settings.yzoom) / scaley);
if (settings.lens) {
$(
"div.jqZoomPup").css(
'visibility',
'visible');
}
}
xpos = mouse.x - $(
"div.jqZoomPup").width() /
2 - imageLeft;
ypos = mouse.y - $(
"div.jqZoomPup").height() /
2 - imageTop;
if (settings.lens) {
xpos = (mouse.x - $(
"div.jqZoomPup").width() /
2 < imageLeft) ?
0 : (mouse.x + $(
"div.jqZoomPup").width() /
2 > imageWidth + imageLeft) ? (imageWidth - $(
"div.jqZoomPup").width() -
2) : xpos;
ypos = (mouse.y - $(
"div.jqZoomPup").height() /
2 < imageTop) ?
0 : (mouse.y + $(
"div.jqZoomPup").height() /
2 > imageHeight + imageTop) ? (imageHeight - $(
"div.jqZoomPup").height() -
2) : ypos;
}
if (settings.lens) {
$(
"div.jqZoomPup").css({ top: ypos, left: xpos });
}
scrolly = ypos;
$(
"div.zoomdiv").get(
0).scrollTop = scrolly * scaley;
scrollx = xpos;
$(
"div.zoomdiv").get(
0).scrollLeft = (scrollx) * scalex;
});
},
function() {
$(
this).children(
"img").attr(
"alt", noalt);
$(document.body).unbind(
"mousemove");
if (settings.lens) {
$(
"div.jqZoomPup").remove();
}
$(
"div.zoomdiv").remove();
});
count =
0;
if (settings.preload) {
$(
'body').append(
"<div style='display:none;' class='jqPreload" + count +
"'>sdsdssdsd</div>");
$(
this).each(
function() {
var imagetopreload = $(
this).children(
"img").attr(
"jqimg");
var content = jQuery(
'div.jqPreload' + count +
'').html();
jQuery(
'div.jqPreload' + count +
'').html(content +
'<img src=\"' + imagetopreload +
'\">');
});
}
}
})(jQuery);
function MouseEvent(e) {
this.x = e.pageX
this.y = e.pageY
}
github地址
如果你想获得完整的项目，方便查看demo，可以点击这个试试：点我查看demo ps：(本来想放到github上的，但是不知道为什么，始终推不上去，也拉不下来。。只能换成上传到码云了) 输入git clone https://git.oschina.net/sunny_des/jq-zoom.git 或者直接点下载压缩包到本地即可体验。
说明
由于插件是网上寻找而来，部分作者署名已经经过修改删除，如有作者发现侵权，麻烦联系一下我，手动删除，感谢~
