jquery.imagezoom.min.js
9.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
(function ($) {
$.fn.imagezoom = function (options) {
var settings = {
xzoom: 310,
yzoom: 310,
offset: 10,
position: "BTR",
preload: 1
};
if (options) {
$.extend(settings, options);
}
var noalt = '';
var self = this;
$(this).bind("mouseenter", function (ev) {
var imageLeft = $(this).offset().left; // 图片与左边的距离
var imageTop = $(this).offset().top; // 图片与顶部的距离
var imageWidth = $(this).get(0).offsetWidth; // 图片宽度，有360，480，640
var imageHeight = $(this).get(0).offsetHeight; // 图片高度，有360，480
var boxLeft = $(this).parent().offset().left; // 包着图片box 距离页面左边的尺寸
var boxTop = $(this).parent().offset().top; // box 距离顶部页面的高度
var boxWidth = $(this).parent().width(); // box 宽度
var boxHeight = $(this).parent().height(); // box 高度
//var test_msg = "imageLeft: " + imageLeft + " imageTop: " + imageTop + " imageWidth: " + imageWidth + " imageHeight: " + imageHeight + " boxLeft: " + boxLeft + " boxTop: " + boxTop + " boxWidth: " + boxWidth + " boxHeight: " + boxHeight;
var imageRotate = $(this).get(0)["style"]["transform"] ? $(this).get(0)["style"]["transform"].substring(($(this).get(0)["style"]["transform"].indexOf("(") + 1), $(this).get(0)["style"]["transform"].indexOf("deg)")) : 0;
if ($(this).get(0)["style"]["transform"] != "" && imageRotate != "" && !isNaN(imageRotate) && imageRotate > 0 && ((imageRotate / 90) % 2 == 1)) {
imageWidth = $(this).get(0).offsetHeight;
imageHeight = $(this).get(0).offsetWidth;
}
noalt = $(this).attr("alt");
var bigimage = $(this).attr("rel");
$(this).attr("alt", '');
if ($("div.zoomDiv").get().length == 0) {
$(document.body).append("<div class='zoomDiv'><img class='bigimg' src='" + bigimage + "'/></div><div class='zoomMask'> </div>");
}
if (settings.position == "BTR") {
if (boxLeft + boxWidth + settings.offset + settings.xzoom > screen.width) {
leftpos = boxLeft - settings.offset - settings.xzoom;
} else {
leftpos = boxLeft + boxWidth + settings.offset;
}
} else {
leftpos = imageLeft - settings.xzoom - settings.offset;
if (leftpos < 0) {
leftpos = imageLeft + imageWidth + settings.offset;
}
}
$("div.zoomDiv").css({
top: boxTop, // zoom box 距离顶部页面的高度
left: leftpos // zoom box 距离页面左边的尺寸
});
$("div.zoomDiv").width(settings.xzoom);
$("div.zoomDiv").height(settings.yzoom);
$("div.zoomDiv").show();
$(this).css('cursor', 'crosshair');
$(document.body).mousemove(function (e) {
mouse = new MouseEvent(e);
if (mouse.x < imageLeft || mouse.x > imageLeft + imageWidth || mouse.y < imageTop || mouse.y > imageTop + imageHeight) {
mouseOutImage();
return;
}
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); // 原图高度除以正常图片高度的比例
if (imageRotate != "" && !isNaN(imageRotate) && imageRotate > 0 && (imageRotate == 90 || imageRotate == 270)) {
scalex = (bigwidth / imageHeight); // x 比例
scaley = (bigheight / imageWidth); // y 比例
}
$("div.zoomMask").width((settings.xzoom) / scalex); // 鼠标小方块放大镜的宽度
$("div.zoomMask").height((settings.yzoom) / scaley); // 鼠标小方块放大镜的高度
// $("div.zoomMask").width(87.5);
// $("div.zoomMask").height(87.5);
$("div.zoomMask").css('visibility', 'visible');
}
xpos = mouse.x - $("div.zoomMask").width() / 2; // 放大镜的x坐标：鼠标距离页面左边的x坐标，减去(放大镜的宽度除以2)
ypos = mouse.y - $("div.zoomMask").height() / 2; // 放大镜的y坐标
xposs = mouse.x - $("div.zoomMask").width() / 2 - imageLeft;
yposs = mouse.y - $("div.zoomMask").height() / 2 - imageTop;
xpos = (mouse.x - $("div.zoomMask").width() / 2 < imageLeft) ? imageLeft : (mouse.x + $("div.zoomMask").width() / 2 > imageWidth + imageLeft) ? (imageWidth + imageLeft - $("div.zoomMask").width()) : xpos;
// 如果鼠标x坐标减去放大镜的一半，少于图片的页面左边距，则使用图片左边距作为放大镜的x坐标。
ypos = (mouse.y - $("div.zoomMask").height() / 2 < imageTop) ? imageTop : (mouse.y + $("div.zoomMask").height() / 2 > imageHeight + imageTop) ? (imageHeight + imageTop - $("div.zoomMask").height()) : ypos;
// 如果鼠标y坐标减去放大镜的一半，少于图片的页面上边距，则使用图片上边距作为放大镜的y坐标。
// 放大镜的xy坐标
$("div.zoomMask").css({
top: ypos,
left: xpos
});
$("div.zoomDiv").get(0).scrollLeft = xposs * scalex; //大图的x坐标，参照物图片坐标乘以比例
$("div.zoomDiv").get(0).scrollTop = yposs * scaley; //大图的y坐标，参照物图片坐标乘以比例
// 旋转调整图片展示
// console.log("imageLeft=" + imageLeft + ",imageTop=" + imageTop + ",imagewidth = " + imageWidth + ",imageHeight=" + imageHeight + ",xposs=" + xposs + ",yposs=" + yposs);
if (imageRotate != "" && !isNaN(imageRotate) && imageRotate > 0) {
$("div.zoomDiv").get(0).style.transform = "rotate(" + imageRotate + "deg)";
console.log("imageLeft=" + imageLeft + ",imageTop=" + imageTop + ",imagewidth = " + imageWidth + ",imageHeight=" + imageHeight + ",xposs=" + xposs + ",yposs=" + yposs);
}
if (imageRotate != "" && !isNaN(imageRotate) && imageRotate > 0 && imageRotate == 90) {
// 先处理大图x坐标的获取，大图的left等于 参照图的y坐标 - 上边距 - 放大镜的一半
yposs = mouse.y - imageTop - $("div.zoomMask").height() / 2;
// 处理大图y坐标的获取，大图的top等于 参照图宽度 + 左边距 - x坐标 - 放大镜的一半
xposs = imageWidth + imageLeft - mouse.x - ($("div.zoomMask").width() / 2);
$("div.zoomDiv").get(0).scrollTop = xposs * scalex;
$("div.zoomDiv").get(0).scrollLeft = yposs * scaley;
} else if (imageRotate != "" && !isNaN(imageRotate) && imageRotate > 0 && imageRotate == 180) {
// 先处理y坐标的获取 大图的top等于 参照图的高度-(y坐标-上边距)-放大镜的一半
yposs = imageHeight - (mouse.y - imageTop) - ($("div.zoomMask").height() / 2);
// 处理x坐标的获取 大图的left等于 参照图的宽度+左边距 - x坐标 - 放大镜的一半
xposs = imageWidth + imageLeft - mouse.x - ($("div.zoomMask").width() / 2);
$("div.zoomDiv").get(0).scrollLeft = xposs * scalex;
$("div.zoomDiv").get(0).scrollTop = yposs * scaley;
} else if (imageRotate != "" && !isNaN(imageRotate) && imageRotate > 0 && imageRotate == 270) {
// 先处理y坐标的获取 大图的top等于参照图的left
yposs = mouse.x - imageLeft - ($("div.zoomMask").width() / 2);
// 处理x坐标的获取 大图的left等于 参照图的高度+上边距 - y坐标 - 放大镜的一半
xposs = imageHeight + imageTop - mouse.y - ($("div.zoomMask").height() / 2);
$("div.zoomDiv").get(0).scrollLeft = xposs * scalex;
$("div.zoomDiv").get(0).scrollTop = yposs * scaley;
}
});
});
function mouseOutImage() {
$(self).attr("alt", noalt);
$(document.body).unbind("mousemove");
$("div.zoomMask").remove();
$("div.zoomDiv").remove();
}
count = 0;
if (settings.preload) {
$('body').append("<div style='display:none;' class='jqPreload" + count + "'></div>");
$(this).each(function () {
var imagetopreload = $(this).attr("rel");
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;
}