// 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);