html5局部放大图片,图片局部放大效果原理详解

图片局部放大准备

图片局部当大的效果，首先需要两张图片，一张小图，用作原图，一张大图，用来展示放大效果，准备好两张图片，下面我们就开始实现局部放大的功能。

我准备了两张iphone手机的照片来实现这个局部放大功能

图片局部放大原理

首先我们把小图显示出来

        

.zoomcont{

margin:12px;

padding:12px;

background:#f1f1f1;

border:1px solid #bababa;

box-sizing:border-box;

}

.zsmall{

width:350px;

height:350px;

border:1px solid #dadada;

}

.zsmall img{

width:100%;

height:100%;

}

效果如下：

这里没的说，就是显示一张图片。

下一步，我们要给原图容器添加mousemove事件获取鼠标在容器内的位置。$(".zsmall").bind("mousemove",function(evt){

var x=evt.clientX;

var y=evt.clientY;

var rect=this.getBoundingClientRect();

var left=rect.left-document.documentElement.clientLeft;

var top=rect.top-document.documentElement.clientTop;

var offx=x-left;

var offy=y-top;

$("#zconsole").html("offsetX:"+offx+" ---- offsetY:"+offy);

});

效果如下：

拿鼠标在容器内移动，显示鼠标相对于容器左上角的位置。event的位置使用可以查看event兼容