// javascript document
(function ($) {
$.fn.zoom = function (options) {
var opts = $.extend({}, $.fn.defaults, options);
return this.each(function () {
var $this = $(this);
$this.css({ position: "relative" });
var $zoomimg = $this.children("img");
$this.append("
");
$("body").append("");
//设置放大镜片
var zoomlens = $(".zoomlens", $this);
var imgleft = $this.offset().left;
var imgtop = $this.offset().top;
var imgwidth = $this.innerwidth();
var imgheight = $this.innerheight();
var paddtop = parseint($this.css("paddingtop"));
var paddleft = parseint($this.css("paddingleft"));
//var mrgleft=parseint($zoomimg.css("marginleft"));
zoomlens.width(opts.xzoom);
zoomlens.height(opts.yzoom);
//设置放大
var zoombox = $(".zoombox");
zoombox.width(opts.xzoom * opts.scale);
zoombox.height(opts.yzoom * opts.scale);
zoombox.css({ left: imgleft + imgwidth + opts.offset, top: imgtop });
var zoombody = $(".zoombody", zoombox);
zoombody.width($this.width() * opts.scale);
zoombody.height($this.height() * opts.scale);
zoombody.css({ "paddingtop": paddtop * opts.scale, paddingleft: paddleft * opts.scale });
$this.hover(function () {
zoomlens.show();
zoombox.fadein("show");
var zoomimg = zoombody.children("img");
var mrgtop = parseint($zoomimg.css("margintop"));
zoomimg.css({ margintop: mrgtop * opts.scale });
zoomimg.width($zoomimg.width() * opts.scale);
zoomimg.height($zoomimg.height() * opts.scale);
zoomimg.attr("src", $zoomimg.attr("src"));
}, function () {
zoomlens.hide();
zoombox.fadeout(300);
});
$this.mousemove(function (e) {
var xpos = e.pagex - imgleft - opts.xzoom / 2 > 0 ? (e.pagex - imgleft - opts.xzoom / 2) : 0;
xpos = xpos > imgwidth - opts.xzoom ? imgwidth - opts.xzoom - 2 : xpos;
var ypos = e.pagey - imgtop - opts.yzoom / 2 > 0 ? (e.pagey - imgtop - opts.yzoom / 2) : 0;
ypos = ypos > imgheight - opts.yzoom ? imgheight - opts.yzoom - 2 : ypos;
zoomlens.css({ left: xpos, top: ypos })
zoombody.css({ left: -xpos * opts.scale, top: -ypos * opts.scale })
});
$(window).resize(function(){
imgleft = $this.offset().left;
imgtop = $this.offset().top;
zoombox.css({ left: imgleft + imgwidth + opts.offset, top: imgtop });
});
});
}
$.fn.defaults = {
xzoom: 100,//放大镜宽度
yzoom: 100,//放大镜高度
offset: 10,//放大图片间距
position: "right",
lens: 1,
preload: 1,
scale: 3
}
})(jquery);