自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个，兼容ie8以上浏览器，别忘了引用jquery，我用的jquery/1.11.0/其他版本没有测试，另外需要注意的时候设置要局部放大的图片以及外部容器的宽度必须一致，否则效果不正确
(function($){
var wlfimgzooms=[];
$.fn.wlfimgzoom=function(options){
if ($(this).length > 1) {
var instances = [];
$(this).each(function (i) {
instances[i] = new wlfimgzoom($(this), options);
wlfimgzooms.push(instances[i]);
});
return instances;
} else {
var instance = new wlfimgzoom($(this), options);
wlfimgzooms.push(instance);
return instance;
}
}
var wlfimgzoom = function (select, options) {
this.op = {width:"300px",height:"300px",zooms:"90"};
$.extend(this.op, options);
this.obj = select;
this.zoom_m = this.obj.width();
this.zoom_w = this.obj.children("img").width();
this.zooms=this.op.zooms/2;
this.fd=$("<div class='fd'><div class='fd1'><img src='' /></div></div>");
this.xt=$("<div class='xt'><div class='xt1'><img src='' /></div></div>")
this.init();
};
wlfimgzoom.prototype = {
init: function () {
this.build();
this.bindEvents();
},
build: function () {
this.obj.css("position","relative");
var src=this.obj.children("img").attr("src");
this.fd.appendTo(this.obj).children().children("img").attr("src",src);
this.fd.css({"position":"absolute","top":"0","left":this.obj.width()+20,"width":this.op.width,"height":this.op.height,"overflow":"hidden","display":"none",});
this.xt.appendTo(this.obj).children().children("img").attr({"src":src,"width":this.obj.children("img").width(),"height":this.obj.children("img").height()});
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"});
},
bindEvents: function () {
var self=this;
this.obj.hover(function(){self.xt.show();self.fd.show();
self.zoom_b=self.fd.children().children("img").width();},function(){self.xt.hide();self.fd.hide()})
this.obj.mousemove(function(e) {
var x = e.offsetX;//||e.originalEvent.x || e.originalEvent.layerX || 0;
var y = e.offsetY;//||e.originalEvent.y || e.originalEvent.layerY || 0;
movebigpic(x,y);
movediv(x,y);
});
function movebigpic(x, y)
{
var xx = 0;
var yy = 0;
if (x < self.zooms)
{
xx = 0;
}
else if (x > (self.zoom_m - self.zooms))
{
xx = self.zoom_w - self.zoom_b;
}
else
{
xx = (self.zooms - x) * (self.zoom_b - self.zoom_w) / (self.zoom_m - self.op.zooms);
}
if (y < self.zooms)
{
yy = 0;
}
else if (y > (self.zoom_m - self.zooms))
{
yy = self.zoom_w - self.zoom_b;
}
else
{
console.clear();
console.log("self.zoom_w",self.zoom_w)
console.log("self.zoom_b",self.zoom_b)
yy = (self.zooms - y) * (self.zoom_b - self.zoom_w) / (self.zoom_m - self.op.zooms);
}
self.fd.children().css({"left":xx + "px","top":yy + "px","position":"absolute"})
}
function movediv(x, y)
{
var xx = 0;
var yy = 0;
if (x < self.zooms)
{
xx = 0;
}
else if (x > (self.zoom_m - self.zooms))
{
xx = self.zoom_m - self.op.zooms;
}
else
{
xx = x - self.zooms;
}
if (y < self.zooms)
{
yy = 0;
}
else if (y > (self.zoom_m - self.zooms))
{
yy = self.zoom_m - self.op.zooms;
}
else
{
yy = y - self.zooms;
}
self.xt.css({"left":xx + "px","top":yy + "px","position":"absolute"})
movesmallpic(xx, yy);
}
function movesmallpic(x, y)
{
var xx = 0 - x;
var yy = 0 - y;
self.xt.children().css({"left":xx + "px","top":yy + "px","position":"absolute"})
}
}
}
})(jQuery)
上面是核心的插件代码
调用方法是
其中参数width，height表示局部放大的容器宽高，zooms表示鼠标放到图片上时小方块的宽高
$(function(){
$(".imgzoom").wlfimgzoom({width:"300px",height:"300px",zooms:"90"}); })
html代码
<div id="one" class="imgzoom">
<img class="small" src="data:images/1_b.jpg" />
</div>
<div id="two" class="imgzoom">
<img class="small" src="http://img.sootuu.com/vector/200801/097/655.jpg" />
</div>
主要样式表
.imgzoom{width:150px;}
.imgzoom img.small{width:150px;height:150px;}