图片局部放大准备
图片局部当大的效果，首先需要两张图片，一张小图，用作原图，一张大图，用来展示放大效果，准备好两张图片，下面我们就开始实现局部放大的功能。
我准备了两张iphone手机的照片来实现这个局部放大功能
图片局部放大原理
首先我们把小图显示出来
.zoomcont{
margin:12px;
padding:12px;
background:#f1f1f1;
border:1pxsolid#bababa;
box-sizing:border-box;
}
.zsmall{
width:350px;
height:350px;
border:1pxsolid#dadada;
}
.zsmallimg{
width:100%;
height:100%;
}
效果如下：
这里没的说，就是显示一张图片。
下一步，我们要给原图容器添加mousemove事件获取鼠标在容器内的位置。$(".zsmall").bind("mousemove",function(evt){
varx=evt.clientX;
vary=evt.clientY;
varrect=this.getBoundingClientRect();
varleft=rect.left-document.documentElement.clientLeft;
vartop=rect.top-document.documentElement.clientTop;
varoffx=x-left;
varoffy=y-top;
$("#zconsole").html("offsetX:"+offx+"----offsetY:"+offy);
});
效果如下：
拿鼠标在容器内移动，显示鼠标相对于容器左上角的位置。event的位置使用可以查看event兼容。
我们先获取event对象的clientX，clientY值，减去容器的boundingclient的位置值，这个是offsetX，offsetY的兼容方式。我们的目的就是要获取鼠标相对于容器的位置。
能获取鼠标位置了下一步我们就要给鼠标周围添加一个蒙版div显示放大的范围。
效果如下：
代码如下：varow=350;
varoh=350;
varmw=175;
varmh=175;
$(".zsmall").bind("mousemove",function(evt){
varx=evt.clientX;
vary=evt.clientY;
varrect=this.getBoundingClientRect();
varleft=rect.left-document.documentElement.clientLeft;
vartop=rect.top-document.documentElement.clientTop;
varoffx=x-left;
varoffy=y-top;
$("#zconsole").html("offsetX:"+offx+"----offsetY:"+offy);
//显示div蒙版放大范围
varmask=$(this).find(".zmask");
if(mask.length==0){
mask=$("
mask.appendTo($(this));
}
varmx=offx-mw/2;
varmy=offy-mh/2;
if(mx<0){mx=0;}
if(mx>ow-mw){mx=ow-mw;}
if(my<0){my=0;}
if(my>oh-mh){my=oh-mh;}
mask.css({left:mx,top:my});
});
.zoomcont{
margin:12px;
padding:12px;
background:#f1f1f1;
border:1pxsolid#bababa;
box-sizing:border-box;
}
.zsmall{
width:350px;
height:350px;
position:relative;
}
.zsmallimg{
width:100%;
height:100%;
}
#zconsole{
margin-top:20px;
background:#fff;
line-height:26px;
font-size:13px;
color:#C91010;
}
.zbig{
position:absolute;
wdith:400px;
height:400px;
z-index:3;
top:0;
left:100%;
overflow:hidden;
display:none;
}
.zbigimg{
width:800px;
height:800px;
position:relative;
}
.zmask{
position:absolute;
z-Index:2;
width:175px;
height:175px;
box-sizing:border-box;
background:#FEDE4F;
border:1pxsolid#dadada;
opacity:0.5;
filter:alpha(opacity=50);
}
给zsmall元素要添加上relative属性，蒙版的的中心点是鼠标，如果鼠标靠边上，那么蒙版最多移动到zsmall的边上。4个if判断就是控制蒙版在容器内。
还得来个demo展示比较直观：局部放大鼠标范围蒙版。
给zsmall元素添加relative定位，方便mask元素的定位。
有了蒙版，最后一步就是显示图片的放大部分，下面我们实现局部放大功能，和鼠标离开时的复位方法。.zoomcont{
margin:12px;
padding:12px;
background:#f1f1f1;
border:1pxsolid#bababa;
box-sizing:border-box;
}
.zsmall{
width:350px;
height:350px;
position:relative;
border:1pxsolid#bababa;
}
.zsmallimg{
width:100%;
height:100%;
}
#zconsole{
margin-top:20px;
background:#fff;
line-height:26px;
font-size:13px;
color:#C91010;
}
.zbig{
position:absolute;
z-index:3;
top:0;
left:100%;
margin-left:4px;
overflow:hidden;
display:none;
border:1pxsolid#0F9B4E;
}
.zbigimg{
width:800px;
height:800px;
position:relative;
}
.zmask{
position:absolute;
z-Index:2;
width:175px;
height:175px;
box-sizing:border-box;
background:#FEDE4F;
border:1pxsolid#dadada;
opacity:0.5;
filter:alpha(opacity=50);
}
鼠标进入进行局部放大效果
varow=350;
varoh=350;
varmw=175;
varmh=175;
varbw=800;
varbh=800;
//计算放大容器的大小。
varbigcw=(bw/ow)*mw;
varbigch=(bh/oh)*mh;
$(".zbig").css({width:bigcw,height:bigch});
//绑定鼠标移动事件
$(".zsmall").bind("mousemove",function(evt){
varx=evt.clientX;
vary=evt.clientY;
varrect=this.getBoundingClientRect();
varleft=rect.left-document.documentElement.clientLeft;
vartop=rect.top-document.documentElement.clientTop;
varoffx=x-left;
varoffy=y-top;
$("#zconsole").html("offsetX:"+offx+"----offsetY:"+offy);
//显示div蒙版放大范围
varmask=$(this).find(".zmask");
if(mask.length==0){
mask=$("
mask.appendTo($(this));
}else{
mask.css("display","block");
}
varmx=offx-mw/2;
varmy=offy-mh/2;
if(mx<0){mx=0;}
if(mx>ow-mw){mx=ow-mw;}
if(my<0){my=0;}
if(my>oh-mh){my=oh-mh;}
mask.css({left:mx,top:my});
//大图的偏移位置
varbx=-(bw/ow)*mx;
varby=-(bh/oh)*my;
$(".zbigimg").css({left:bx,top:by});
if($(".zbig").css("display")=="none"){
$(".zbig").css("display","block");
}
});
//绑定鼠标离开事件
$(".zsmall").bind("mouseleave",function(){
$(this).find(".zmask").css("display","none");
$(this).find(".zbig").css("display","none");
$("#zconsole").html("鼠标进入进行局部放大效果");
});
效果如下：
到这里，图片局部放大的整个效果就算实现了。可以点击这里查看图片局部放大效果完整效果。
放大容器的大小为： (大图大小/小图大小)*mask大小。
放大容器的位置：(大图大小/小图大小)*mask的位置。
通过这两个算法来实现放大位置的对象，大图采用relative定位，通过left，top值来改变现实的大图片部分。
整个div的布局很简练，zsmall容器relative定位，蒙版和放大容器都使用absolute定位进行显示。对于蒙版的宽高，大小图的宽高，都作为参数使用，以后有时间可以把它封装成一个插件，方便使用。本文主要讲解图片局部放大原理，理解原理和算法的实现是本文的目的。
