自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个，兼容ie8以上浏览器，别忘了引用jquery，我用的jquery/1.11.0/其他版本没有测试，另外需要注意的时候设置要局部放大的图片以及外部容器的宽度必须一致，否则效果不正确

  1 (function($){

  2     var wlfimgzooms=[];

  3     $.fn.wlfimgzoom=function(options){

  4      if ($(this).length > 1) {

  5             var instances = [];

  6             $(this).each(function (i) {

  7                 instances[i] = new wlfimgzoom($(this), options);

  8                 wlfimgzooms.push(instances[i]);

  9             });

 10             return instances;

 11         } else {

 12             var instance = new wlfimgzoom($(this), options);

 13             wlfimgzooms.push(instance);

 14             return instance;

 15         }

 16     }

 17     

 18     var wlfimgzoom = function (select, options) {

 19         this.op = {width:"300px",height:"300px",zooms:"90"};

 20         $.extend(this.op, options);

 21         this.obj = select;

 22         this.zoom_m = this.obj.width();

 23         this.zoom_w = this.obj.children("img").width();

 24         this.zooms=this.op.zooms/2;

 25         this.fd=$("<div class='fd'><div class='fd1'><img src='' /></div></div>");

 26         this.xt=$("<div class='xt'><div class='xt1'><img src='' /></div></div>")

 27         this.init();

 28     };

 29      wlfimgzoom.prototype = {

 30         init: function () {

 31             this.build();

 32             this.bindEvents();

 33         },

 34         build: function () {

 35         this.obj.css("position","relative");

 36         var src=this.obj.children("img").attr("src");

 37         this.fd.appendTo(this.obj).children().children("img").attr("src",src);

 38         this.fd.css({"position":"absolute","top":"0","left":this.obj.width()+20,"width":this.op.width,"height":this.op.height,"overflow":"hidden","display":"none",});

 39         this.xt.appendTo(this.obj).children().children("img").attr({"src":src,"width":this.obj.children("img").width(),"height":this.obj.children("img").height()});

 40         this.xt.css({width:this.op.zooms+"px",height:this.op.zooms+"px","position":"absolute","overflow":"hidden","display":"none","border":"1px #444 solid","left":"0","top":"0"});

 41         },

 42         bindEvents: function () {

 43         var self=this;

 44         this.obj.hover(function(){self.xt.show();self.fd.show();

 45         self.zoom_b=self.fd.children().children("img").width();},function(){self.xt.hide();self.fd.hide()})

 46         this.obj.mousemove(function(e) { 

 47             var x = e.offsetX;//||e.originalEvent.x || e.originalEvent.layerX || 0; 

 48             var y = e.offsetY;//||e.originalEvent.y || e.originalEvent.layerY || 0; 

 49         movebigpic(x,y);

 50         movediv(x,y);

 51         });

 52         function movebigpic(x, y)

 53         {

 54           var xx = 0;

 55           var yy = 0;

 56           if (x < self.zooms)

 57           {

 58             xx = 0;

 59           }

 60           else if (x > (self.zoom_m - self.zooms))

 61           {

 62             xx = self.zoom_w - self.zoom_b;

 63           }

 64           else

 65           {

 66             xx = (self.zooms - x) * (self.zoom_b - self.zoom_w) / (self.zoom_m - self.op.zooms);

 67           }

 68 

 69           if (y < self.zooms)

 70           {

 71             yy = 0;

 72           }

 73           else if (y > (self.zoom_m - self.zooms))

 74           {

 75             yy = self.zoom_w - self.zoom_b;

 76           }

 77           else

 78           {

 79             console.clear();

 80             console.log("self.zoom_w",self.zoom_w)

 81             console.log("self.zoom_b",self.zoom_b)

 82             yy = (self.zooms - y) * (self.zoom_b - self.zoom_w) / (self.zoom_m - self.op.zooms);

 83           }

 84           self.fd.children().css({"left":xx + "px","top":yy + "px","position":"absolute"})

 85           

 86         }

 87 

 88 function movediv(x, y)

 89 {

 90   var xx = 0;

 91   var yy = 0;

 92   if (x < self.zooms)

 93   {

 94     xx = 0;

 95   }

 96   else if (x > (self.zoom_m - self.zooms))

 97   {

 98     xx = self.zoom_m - self.op.zooms;

 99   }

100   else

101   {

102     xx = x - self.zooms;

103   }

104   if (y < self.zooms)

105   {

106     yy = 0;

107   }

108   else if (y > (self.zoom_m - self.zooms))

109   {

110     yy = self.zoom_m - self.op.zooms;

111   }

112   else

113   {

114     yy = y - self.zooms;

115   }

116 self.xt.css({"left":xx + "px","top":yy + "px","position":"absolute"})

117   movesmallpic(xx, yy);

118 }

119 

120 function movesmallpic(x, y)

121 {

122   var xx = 0 - x;

123   var yy = 0 - y;

124 

125 self.xt.children().css({"left":xx + "px","top":yy + "px","position":"absolute"})

126 

127 }

128         }

129     }

130     })(jQuery)

上面是核心的插件代码

调用方法是

其中参数width，height表示局部放大的容器宽高，zooms表示鼠标放到图片上时小方块的宽高

$(function(){

    $(".imgzoom").wlfimgzoom({width:"300px",height:"300px",zooms:"90"}); })

html代码

1     <div id="one" class="imgzoom">

2         <img class="small" src="images/1_b.jpg" />

3     </div>

4     <div id="two" class="imgzoom">

5         <img class="small" src="http://img.sootuu.com/vector/200801/097/655.jpg" />

6     </div>

主要样式表

1 .imgzoom{width:150px;}

2 .imgzoom img.small{width:150px;height:150px;}