/**
* 使用方法
* 加入放大镜的css样式 style 标签
// 放大镜功能插件
var _img = $(".product-detail-image-big>img").magnifier({
ratio: 3,
});
// 传入的参数在 var defaults = {} 有定义默认参数
*/
// 放大镜插件
(function ($) {
$.fn.extend({
"magnifier": function (options) {
var defaults = {
beginstyle: function (_this) {
},
ratio: 2,
display: "left",
margin: 8,
endstyle: function (_this) {
},
mover: function (magnifier, zoom) {
},
mout: function (magnifier, zoom) {
}
};
var options = $.extend(defaults, options);
var _this = this;
if (typeof options.beginstyle === "function") {
options.beginstyle(_this);
}
// 获取left以及top ,还有 zoom 的宽度根高度 定义zoom的div层
_this.mouseover(function (e) {
// 首先删除已有的显示层结构
$(".class-zoom-img").each(function (key) {
$(this).remove()
});
$(".class-zoom").each(function (key) {
$(this).remove()
});
var x = _this.offset().left;
var y = _this.offset().top;
var _zoom_width = parseint(_this.width() / options.ratio);
var _zoom_height = parseint(_this.height() / options.ratio);
var _img_tag = "
";
$("body").append(_img_tag);
var _class_coom = $(".class-zoom");
_class_coom.css({"position": "absolute", "z-index": "100", "top": (e.pagey - _zoom_height / 2) + "px", "left": (e.pagex - _zoom_width / 2) + "px", "width": parseint(_zoom_width - 1) + "px", "height": parseint(_zoom_height - 1) + "px", "border": "1px solid #bbbbbb", "cursor": "pointer"}); //
_class_coom.show();
// 显示放大镜效果时执行的配置方法
if (typeof options.mover === "function") {
options.mover(_this, _class_coom);
}
// 图片显示
if (_class_coom.next(".class-zoom-img").length > 0) {
var _coom_img_f = _class_coom.next(".class-zoom-img");
} else {
var _img_f = "
";
_class_coom.after(_img_f);
var _coom_img_f = _class_coom.next(".class-zoom-img");
}
var _zoomx = parseint(_zoom_width / options.ratio);
var _zoomy = parseint(_zoom_height / options.ratio);
if (options.display === "left") {
var imgx = x + _this.width() + options.margin;
var imgy = y;
} else if (options.display === "right") {
var imgx = x - _this.width() - options.margin;
var imgy = y;
} else {
console.log("显示方式只有 左右 两种 (display:\"left\" or \"right\")");
}
_coom_img_f.css({"overflow": "hidden", "width": _this.width() + "px", "height": _this.height() + "px", "position": "absolute", "z-index": "100", "left": imgx + "px", "top": imgy + "px", "background-image": "none"/*url(" + _this.attr("src") + ")*/, "background-repeat": "no-repeat"});
classzoommove(x, y, _zoom_width, _zoom_height, e, _class_coom, _coom_img_f);
_class_coom.mousemove(function (es) {
classzoommove(x, y, _zoom_width, _zoom_height, es, _class_coom, _coom_img_f);
});
_class_coom.mouseout(function () {
// 显示放大镜效果时执行的配置方法
if (typeof options.mout === "function") {
options.mout(_this, _class_coom);
}
$(".class-zoom").each(function (key) {
$(this).remove()
});
$(".class-zoom-img").each(function (key) {
$(this).remove()
});
if (typeof options.endstyle === "function") {
options.endstyle(_this);
}
});
$(document).mousemove(function (dme) {
var dmex = dme.pagex;
var dmey = dme.pagey;
if ((_class_coom.offset().top - 10) > dmey || (_class_coom.height() + _class_coom.offset().top + 10) < dmey) {
_class_coom.mouseout();
$(document).unbind('mousemove');
}
if ((_class_coom.offset().left - 10) > dmex || (_class_coom.width() + _class_coom.offset().left + 10) < dmex) {
_class_coom.mouseout();
$(document).unbind('mousemove');
}
});
});
function classzoommove(x, y, _zoom_width, _zoom_height, e, _class_coom, _coom_img_f) {
if ((y + _this.height() - (_zoom_height / 2)) < e.pagey) {
var pointy = y + _this.height() - _zoom_height;
} else if ((y + (_zoom_height / 2)) > e.pagey) {
var pointy = y;
} else {
var pointy = (e.pagey - _zoom_height / 2);
}
if ((x + _this.width() - (_zoom_width / 2)) < e.pagex) {
var pointx = x + _this.width() - _zoom_width;
} else if (x + (_zoom_width / 2) > e.pagex) {
var pointx = x;
} else {
var pointx = (e.pagex - _zoom_width / 2);
}
_class_coom.css({"position": "absolute", "top": pointy + "px", "left": pointx + "px"});
var positionx = parseint((x - _class_coom.offset().left) * options.ratio);
var positiony = parseint((y - _class_coom.offset().top) * options.ratio);
_coom_img_f.children("img").css({"position": "relative", "top": positiony + "px", "left": positionx + "px"});
}
}
});
})(jquery);