;(function ($, window) {
let ele = null,
exzoom_img_box = null,
boxwidth = null,
boxheight = null,
exzoom_img_ul_outer = null,//鐢ㄤ簬闄愬埗 ul 瀹藉害,鍙堜笉褰卞搷鏀惧ぇ闀滃尯鍩? exzoom_img_ul = null,
exzoom_img_ul_position = 0,//寰幆鍥剧墖鍖哄煙鐨勮竟璺?鐢ㄤ簬绉诲姩鏃惰窡闅忓厜鏍? exzoom_img_ul_width = 0,//寰幆鍥剧墖鍖哄煙鐨勬渶澶у搴? exzoom_img_ul_max_margin = 0,//寰幆鍥剧墖鍖哄煙鐨勬渶澶у杈硅窛,搴旇鏄浘鐗囨暟閲忓噺涓€涔樹互boxwidth
exzoom_nav = null,
exzoom_nav_inner = null,
navhightclass = "current",//褰撳墠鍥剧墖鐨勭被,
exzoom_navspan = null,
navheightwithborder = null,
images = null,
exzoom_prev_btn = null,//瀵艰埅涓婁竴寮犲浘鐗? exzoom_next_btn = null,//瀵艰埅涓嬩竴寮犲浘鐗? imgnum = 0,//鍥剧墖鐨勬暟閲? imgindex = 0,//褰撳墠鍥剧墖鐨勭储寮? imgarr = [],//鍥剧墖灞炴€х殑鏁板瓧
exzoom_zoom = null,
exzoom_main_img = null,
exzoom_zoom_outer = null,
exzoom_preview = null,//棰勮鍖哄煙
exzoom_preview_img = null,//棰勮鍖哄煙鐨勫浘鐗? autoplayinterval = null,//鐢ㄤ簬鎺у埗鑷姩鎾斁鐨勯棿闅旀椂闂? startx = 0,//绉诲姩鍏夋爣鐨勮捣濮嬪潗鏍? starty = 0,//绉诲姩鍏夋爣鐨勮捣濮嬪潗鏍? endx = 0,//绉诲姩鍏夋爣鐨勭粓姝㈠潗鏍? endy = 0,//绉诲姩鍏夋爣鐨勭粓姝㈠潗鏍? g = {},//鍏ㄥ眬鍙橀噺
defaults = {
"navwidth": 60,//鍒楄〃姣忎釜瀹藉害,璇ョ増鏈腑璇锋妸瀹介珮濉啓鎴愪竴鏍? "navheight": 60,//鍒楄〃姣忎釜楂樺害,璇ョ増鏈腑璇锋妸瀹介珮濉啓鎴愪竴鏍? "navitemnum": 5,//鍒楄〃鏄剧ず涓暟
"navitemmargin": 7,//鍒楄〃闂撮殧
"navborder": 1,//鍒楄〃杈规锛屾病鏈夎竟妗嗗~鍐?锛岃竟妗嗗湪css涓慨鏀? "autoplay": true,//鏄惁鑷姩鎾斁
"autoplaytimeout": 2000,//鎾斁闂撮殧鏃堕棿
};
let methods = {
init: function (options) {
let opts = $.extend({}, defaults, options);
ele = this;
exzoom_img_box = ele.find(".exzoom_img_box");
exzoom_img_ul = ele.find(".exzoom_img_ul");
exzoom_nav = ele.find(".exzoom_nav");
exzoom_prev_btn = ele.find(".exzoom_prev_btn");//缂╃暐鍥惧鑸笂涓€寮犳寜閽? exzoom_next_btn = ele.find(".exzoom_next_btn");//缂╃暐鍥惧鑸笅涓€寮犳寜閽?
//todo 浠ュ悗鍙互鍒嗗紑瀹藉害鍜岄珮搴︾殑闄愬埗
boxheight = boxwidth = ele.outerwidth(); //鍦ㄥ皬灞忓箷涓?鏈?padding 鐨勬儏鍐典笅,璁$畻涓嶅噯,闇€瑕佹墜鍔ㄦ寚瀹?ele 鐨勫搴?
// console.log("boxwidth::" + boxwidth);
// console.log("ele.parent().width()::" + ele.parent().width());
// console.log("ele.parent().outerwidth()::" + ele.parent().outerwidth());
// console.log("ele.parent().innerwidth()::" + ele.parent().innerwidth());
//todo 缂╃暐鍥惧鑸殑楂樺害鍜屽搴﹀彲浠ユ敼涓烘牴鎹?瀵艰埅鏍忓搴?鍜?navitemnum 璁$畻鍑烘潵,浣嗘槸瀵逛簬涓嶅悓灏哄鐨勪笉濂藉鐞? g.navwidth = opts.navwidth;
g.navheight = opts.navheight;
g.navborder = opts.navborder;
g.navitemmargin = opts.navitemmargin;
g.navitemnum = opts.navitemnum;
g.autoplay = opts.autoplay;
g.autoplaytimeout = opts.autoplaytimeout;
images = exzoom_img_box.find("img");
imgnum = images.length;//鍥剧墖鐨勬暟閲? checkloadedallimages(images)//妫€鏌ュ浘鐗囨槸鍚﹀仴鍦ㄥ畬鎴?鍏ㄩ儴鍔犺浇瀹屾垚鐨勪細鎵ц鍒濆鍖? },
prev: function () { //涓婁竴寮犲浘鐗? moveleft()
},
next: function () { //涓嬩竴寮犲浘鐗? moveright();
},
setimg: function () { //璁剧疆澶у浘
let url = arguments[0];
getimagesize(url, function (width, height) {
exzoom_preview_img.attr("src", url);
exzoom_main_img.attr("src", url);
//todo 鏈祴璇? //鍒ゆ柇宸叉湁鐨勫浘鐗囨暟閲忔槸鍚﹀悎鏈€鍒濈殑涓€鑷?涓嶆槸鐨勮瘽灏卞厛鍒犻櫎鏈€鍚庝竴涓? if (exzoom_img_ul.find("li").length === imgnum + 1) {
exzoom_img_ul.find("li:last").remove();
}
exzoom_img_ul.append('
' +
'
');
let image_prop = copute_image_prop(url, width, height);
previewimg(image_prop);
});
},
};
$.fn.extend({
"exzoom": function (method, options) {
if (arguments.length === 0 || (typeof method === 'object' && !options)) {
if (this.length === 0) {
// alert("璋冪敤 jquery.exzomm 鏃剁殑閫夋嫨鍣ㄤ负绌?);
$.error('selector is empty when call jquery.exzomm');
} else {
return methods.init.apply(this, arguments);
}
} else if (methods[method]) {
return methods[method].apply(this, array.prototype.slice.call(arguments, 1));
} else {
// alert("璋冪敤浜?jquery.exzomm 涓笉瀛樺湪鐨勬柟娉?);
$.error('method ' + method + 'does not exist on jquery.exzomm');
}
}
});
/**
* 鍒濆鍖? */
function init() {
exzoom_img_box.append("");
exzoom_nav.append("");
exzoom_img_ul_outer = exzoom_img_box.find(".exzoom_img_ul_outer");
exzoom_nav_inner = exzoom_nav.find(".exzoom_nav_inner");
//鎶?exzoom_img_ul 绉诲姩鍒?exzoom_img_ul_outer 閲? exzoom_img_ul_outer.append(exzoom_img_ul);
//寰幆鎵€鏈夊浘鐗?璁$畻灏哄,娣诲姞缂╃暐鍥惧鑸? for (let i = 0; i < imgnum; i++) {
imgarr[i] = copute_image_prop(images.eq(i));//璁板綍鍥剧墖鐨勫昂瀵稿睘鎬х瓑
console.log(imgarr[i]);
let li = exzoom_img_ul.find("li").eq(i);
li.css("width", boxwidth);//璁剧疆鍥剧墖涓婄骇鐨?li 鍏冪礌鐨勫搴? li.find("img").css({
"margin-top": imgarr[i][5],
"width": imgarr[i][3]
});
}
//缂╃暐鍥惧鑸? exzoom_navspan = exzoom_nav.find("span");
navheightwithborder = g.navborder * 2 + g.navheight;
g.exzoom_navwidth = (navheightwithborder + g.navitemmargin) * g.navitemnum;
g.exzoom_nav_innerwidth = (navheightwithborder + g.navitemmargin) * imgnum;
exzoom_navspan.eq(imgindex).addclass(navhightclass);
exzoom_nav.css({
"height": navheightwithborder + "px",
"width": boxwidth - exzoom_prev_btn.width() - exzoom_next_btn.width(),
});
exzoom_nav_inner.css({
"width": g.exzoom_nav_innerwidth + "px"
});
exzoom_navspan.css({
"margin-left": g.navitemmargin + "px",
"width": g.navwidth + "px",
"height": g.navheight + "px",
});
//璁剧疆婊氬姩鍖哄煙鐨勫搴? exzoom_img_ul_width = boxwidth * imgnum;
exzoom_img_ul_max_margin = boxwidth * (imgnum - 1);
exzoom_img_ul.css("width", exzoom_img_ul_width);
//娣诲姞鏀惧ぇ闀? exzoom_img_box.append(`
`);
exzoom_zoom = exzoom_img_box.find(".exzoom_zoom");
exzoom_main_img = exzoom_img_box.find(".exzoom_main_img");
exzoom_zoom_outer = exzoom_img_box.find(".exzoom_zoom_outer");
exzoom_preview = exzoom_img_box.find(".exzoom_preview");
exzoom_preview_img = exzoom_img_box.find(".exzoom_preview_img");
//璁剧疆澶у浘鍜岄瑙堝浘鍖哄煙
exzoom_img_box.css({
"width": boxheight + "px",
"height": boxheight + "px",
});
exzoom_img_ul_outer.css({
"width": boxheight + "px",
"height": boxheight + "px",
});
exzoom_preview.css({
"width": boxheight + "px",
"height": boxheight + "px",
"left": boxheight + 5 + "px",//娣诲姞涓竟璺? });
previewimg(imgarr[imgindex]);
autoplay();//鑷姩鎾斁
bindingevent();//缁戝畾浜嬩欢
}
/**
* 妫€娴嬪浘鐗囨槸鍚﹀姞杞藉畬鎴? * @param images
*/
function checkloadedallimages(images) {
let timer = setinterval(function () {
let loaded_images_counter = 0;
let all_images_num = images.length;
images.each(function () {
if (this.complete) {
loaded_images_counter++;
}
});
if (loaded_images_counter === all_images_num) {
clearinterval(timer);
init();
}
}, 100)
}
/**
* 鑾峰彇鍏夋爣鍧愭爣,濡傛灉鏄?touch 浜嬩欢,鍙鐞嗙涓€涓? */
function getcursorcoords(event) {
let e = event || window.event;
let coords_data = e, //璁板綍鍧愭爣鐨勬暟鎹?榛樿涓?event 鏈韩,绉诲姩绔殑 touch 浼氫慨鏀? x,//x 杞? y;//y 杞?
if (e["touches"] !== undefined) {
if (e["touches"].length > 0) {
coords_data = e["touches"][0];
}
}
x = coords_data.clientx || coords_data.pagex;
y = coords_data.clienty || coords_data.pagey;
return {'x': x, 'y': y}
}
/**
* 妫€鏌ョщ鍔ㄧ瑙︽懜婊戝姩鐨勪綅缃? */
function checknewpositionlimit(new_position) {
if (-new_position > exzoom_img_ul_max_margin) {
//闄愬埗鍚戝彸鐨勮寖鍥? new_position = -exzoom_img_ul_max_margin;
imgindex = 0;//鍚戝彸瓒呭嚭鑼冨洿鐨勫洖鍒扮涓€涓? } else if (new_position > 0) {
//闄愬埗鍚戝乏鐨勮寖鍥? new_position = 0;
}
return new_position
}
/**
* 缁戝畾鍚勭浜嬩欢
*/
function bindingevent() {
//绉诲姩绔ぇ鍥惧尯鍩熺殑 touchend 浜嬩欢
exzoom_img_ul.on("touchstart", function (event) {
let coords = getcursorcoords(event);
startx = coords.x;
starty = coords.y;
let left = exzoom_img_ul.css("left");
exzoom_img_ul_position = parseint(left);
window.clearinterval(autoplayinterval);//鍋滄鑷姩鎾斁
});
//绉诲姩绔ぇ鍥惧尯鍩熺殑 touchmove 浜嬩欢
exzoom_img_ul.on("touchmove", function (event) {
let coords = getcursorcoords(event);
let new_position;
endx = coords.x;
endy = coords.y;
//鍙窡闅忓厜鏍囩щ鍔? new_position = exzoom_img_ul_position + endx - startx;
new_position = checknewpositionlimit(new_position);
exzoom_img_ul.css("left", new_position);
});
//绉诲姩绔ぇ鍥惧尯鍩熺殑 touchend 浜嬩欢
exzoom_img_ul.on("touchend", function (event) {
//瑙﹀睆婊戝姩,鏍规嵁绉诲姩鏂瑰悜鎸夊€嶆暟瀵归綈鍏冪礌
console.log(endx < startx);
if (endx < startx) {
//鍚戝乏婊戝姩
moveright();
} else if (endx > startx) {
//鍚戝彸婊戝姩
moveleft();
}
autoplay();//鎭㈠鑷姩鎾斁
});
//澶у睆骞曞湪鏀惧ぇ鍖哄煙鐐瑰嚮,鍒ゆ柇鍚戝乏杩樻槸鍚戝彸绉诲姩
exzoom_zoom_outer.on("mousedown", function (event) {
let coords = getcursorcoords(event);
startx = coords.x;
starty = coords.y;
let left = exzoom_img_ul.css("left");
exzoom_img_ul_position = parseint(left);
});
exzoom_zoom_outer.on("mouseup", function (event) {
let offset = ele.offset();
if (startx - offset.left < boxwidth / 2) {
//鍦ㄦ斁澶ч暅鐨勫乏鍗婇儴鍒嗙偣鍑? moveleft();
} else if (startx - offset.left > boxwidth / 2) {
//鍦ㄦ斁澶ч暅鐨勫彸鍗婇儴鍒嗙偣鍑? moveright();
}
});
//杩涘叆 exzoom 鍋滄鑷姩鎾斁
ele.on("mouseenter", function () {
window.clearinterval(autoplayinterval);//鍋滄鑷姩鎾斁
});
//绂诲紑 exzoom 寮€濮嬭嚜鍔ㄦ挱鏀? ele.on("mouseleave", function () {
autoplay();//鎭㈠鑷姩鎾斁
});
//澶у睆骞曡繘鍏ュぇ鍥惧尯鍩? exzoom_zoom_outer.on("mouseenter", function () {
exzoom_zoom.css("display", "block");
exzoom_preview.css("display", "block");
});
//澶у睆骞曞湪澶у浘鍖哄煙绉诲姩
exzoom_zoom_outer.on("mousemove", function (e) {
let width_limit = exzoom_zoom.width() / 2,
max_x = exzoom_zoom_outer.width() - width_limit,
max_y = exzoom_zoom_outer.height() - width_limit,
current_x = e.pagex - exzoom_zoom_outer.offset().left,
current_y = e.pagey - exzoom_zoom_outer.offset().top,
move_x = current_x - width_limit,
move_y = current_y - width_limit;
if (current_x <= width_limit) {
move_x = 0;
}
if (current_x >= max_x) {
move_x = max_x - width_limit;
}
if (current_y <= width_limit) {
move_y = 0;
}
if (current_y >= max_y) {
move_y = max_y - width_limit;
}
exzoom_zoom.css({"left": move_x + "px", "top": move_y + "px"});
exzoom_preview_img.css({
"left": -move_x * exzoom_preview.width() / exzoom_zoom.width() + "px",
"top": -move_y * exzoom_preview.width() / exzoom_zoom.width() + "px"
});
});
//澶у睆骞曠寮€澶у浘鍖哄煙
exzoom_zoom_outer.on("mouseleave", function () {
exzoom_zoom.css("display", "none");
exzoom_preview.css("display", "none");
});
//澶у睆骞曞厜瀹濊繘鍏ユ斁澶ч瑙堝尯鍩? exzoom_preview.on("mouseenter", function () {
exzoom_zoom.css("display", "none");
exzoom_preview.css("display", "none");
});
//缂╃暐鍥惧鑸? exzoom_next_btn.on("click", function () {
moveright();
});
exzoom_prev_btn.on("click", function () {
moveleft();
});
exzoom_navspan.hover(function () {
imgindex = $(this).index();
move(imgindex);
});
}
/**
* 鑱氱劍鍦ㄥ鑸浘鐗囦笂,宸﹀彸绉诲姩閮戒細璋冪敤
* @param direction: 鏂瑰悜,right | left,蹇呭~
*/
function move(direction) {
if (typeof direction === "undefined") {
alert("exzoom 涓殑 move 鍑芥暟鐨?direction 鍙傛暟蹇呭~");
}
//濡傛灉瓒呭嚭鍥剧墖鏁伴噺浜?杩斿洖绗竴寮? if (imgindex > imgarr.length - 1) {
imgindex = 0;
}
//璁剧疆楂樹寒
exzoom_navspan.eq(imgindex).addclass(navhightclass).siblings().removeclass(navhightclass);
//鍒ゆ柇缂╃暐鍥惧鑸槸鍚﹂渶瑕侀噸鏂拌缃亸绉婚噺
let exzoom_nav_width = exzoom_nav.width();
let nav_item_width = g.navitemmargin + g.navwidth + g.navborder * 2; // 鍗曚釜瀵艰埅鍏冪礌鐨勫搴? let new_nav_offset = 0;
//鐩存帴瀵规瘮褰撳墠绱㈠紩鐨勫浘鐗囧崰鎹殑瀹藉害鍜宔xzoom鐨勫搴︾殑宸綔涓哄亸绉婚噺鍗冲彲
let temp = nav_item_width * (imgindex + 1);
if (temp > exzoom_nav_width) {
new_nav_offset = boxwidth - temp;
}
exzoom_nav_inner.css({
"left": new_nav_offset
});
//鍒囨崲澶у浘
let new_position = -boxwidth * imgindex;
//鍦?animate 鏂规硶鍓嶅厛璋冪敤 stop() ,閬垮厤鍙嶅簲杩熼挐
new_position = checknewpositionlimit(new_position);
exzoom_img_ul.stop().animate({"left": new_position}, 500);
//澶勭悊鏀惧ぇ鍖哄煙
previewimg(imgarr[imgindex]);
}
/**
* 瀵艰埅鍚戝彸
*/
function moveright() {
imgindex++;//鍏堝鍔?index,鍚庨潰鍒ゆ柇鑼冨洿
if (imgindex > imgnum) {
imgindex = imgnum;
}
move("right");
}
/**
* 瀵艰埅鍚戝乏
*/
function moveleft() {
imgindex--;//鍏堝噺灏?index,鍚庨潰鍒ゆ柇鑼冨洿
if (imgindex < 0) {
imgindex = 0;
}
move("left");
}
/**
* 鑷姩鎾斁
*/
function autoplay() {
if (g.autoplay) {
autoplayinterval = window.setinterval(function () {
if (imgindex >= imgnum) {
imgindex = 0;
}
imgindex++;
move("right");
}, g.autoplaytimeout);
}
}
/**
* 棰勮鍥剧墖
*/
function previewimg(image_prop) {
if (image_prop === undefined) {
return
}
exzoom_preview_img.attr("src", image_prop[0]);
exzoom_main_img.attr("src", image_prop[0])
.css({
"width": image_prop[3] + "px",
"height": image_prop[4] + "px"
});
exzoom_zoom_outer.css({
"width": image_prop[3] + "px",
"height": image_prop[4] + "px",
"top": image_prop[5] + "px",
"left": image_prop[6] + "px",
"position": "relative"
});
exzoom_zoom.css({
"width": image_prop[7] + "px",
"height": image_prop[7] + "px"
});
exzoom_preview_img.css({
"width": image_prop[8] + "px",
"height": image_prop[9] + "px"
});
}
/**
* 鑾峰緱鍥剧墖鐨勭湡瀹炲昂瀵? * @param url
* @param callback
*/
function getimagesize(url, callback) {
let img = new image();
img.src = url;
// 濡傛灉鍥剧墖琚紦瀛橈紝鍒欑洿鎺ヨ繑鍥炵紦瀛樻暟鎹? if (typeof callback !== "undefined") {
if (img.complete) {
callback(img.width, img.height);
} else {
// 瀹屽叏鍔犺浇瀹屾瘯鐨勪簨浠? img.onload = function () {
callback(img.width, img.height);
}
}
} else {
return {
width: img.width,
height: img.height
}
}
}
/**
* 璁$畻鍥剧墖灞炴€? * @param image : jquery 瀵硅薄鎴?鍥剧墖url鍦板潃
* @param width : image 涓哄浘鐗噓rl鍦板潃鏃舵寚瀹氬搴? * @param height : image 涓哄浘鐗噓rl鍦板潃鏃舵寚瀹氶珮搴? * @returns {array}
*/
function copute_image_prop(image, width, height) {
let src;
let res = [];
if (typeof image === "string") {
src = image;
} else {
src = image.attr("src");
let size = getimagesize(src);
width = size.width;
height = size.height;
}
res[0] = src;
res[1] = width;
res[2] = height;
let img_scale = res[1] / res[2];
if (img_scale === 1) {
res[3] = boxheight;//width
res[4] = boxheight;//height
res[5] = 0;//top
res[6] = 0;//left
res[7] = boxheight / 2;
res[8] = boxheight * 2;//width
res[9] = boxheight * 2;//height
exzoom_nav_inner.append(`
`);
} else if (img_scale > 1) {
res[3] = boxheight;//width
res[4] = boxheight / img_scale;
res[5] = (boxheight - res[4]) / 2;
res[6] = 0;//left
res[7] = res[4] / 2;
res[8] = boxheight * 2 * img_scale;//width
res[9] = boxheight * 2;//height
let top = (g.navheight - (g.navwidth / img_scale)) / 2;
exzoom_nav_inner.append(`
`);
} else if (img_scale < 1) {
res[3] = boxheight * img_scale;//width
res[4] = boxheight;//height
res[5] = 0;//top
res[6] = (boxheight - res[3]) / 2;
res[7] = res[3] / 2;
res[8] = boxheight * 2;//width
res[9] = boxheight * 2 / img_scale;
let top = (g.navwidth - (g.navheight * img_scale)) / 2;
exzoom_nav_inner.append(`
`);
}
return res;
}
// 闂寘缁撴潫
})(jquery, window);