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