自己改写了一个图片局部放大的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;}