图片局部放大效果原理详解
2017-01-23 23:28

图片局部放大准备

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

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

图片局部放大原理

首先我们把小图显示出来

<div class="zoomcont">
    <div class="zsmall">
        <img src="images/small.jpg"/>
    </div>
    <div id="zconsole"></div>
</div>

.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%;
}

效果如下:

zoom.png

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

下一步,我们要给原图容器添加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);
});

效果如下:

zoom2.png

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

我们先获取event对象的clientX,clientY值,减去容器的boundingclient的位置值,这个是offsetX,offsetY的兼容方式。我们的目的就是要获取鼠标相对于容器的位置。

你可以体验一下:局部大方鼠标位置获取


能获取鼠标位置了下一步我们就要给鼠标周围添加一个蒙版div显示放大的范围。

效果如下:

zoom3.png

代码如下:

var ow=350;
var oh=350;
var mw=175;
var mh=175;
$(".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);
    //显示div蒙版放大范围
    var mask=$(this).find(".zmask");
    if(mask.length==0){
        mask=$("<div class='zmask'></div>");
        mask.appendTo($(this));
    }
    var mx=offx-mw/2;
    var my=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:1px solid #bababa;
    box-sizing:border-box;
}
.zsmall{
    width:350px;
    height:350px;
    position:relative;
}
.zsmall img{
    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;
}
.zbig img{
    width:800px;
    height:800px;
    position:relative;
}
.zmask{
    position:absolute;
    z-Index:2;
    width:175px;
    height:175px;
    box-sizing: border-box;
    background:#FEDE4F;
    border:1px solid #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:1px solid #bababa;
    box-sizing:border-box;
}
.zsmall{
    width:350px;
    height:350px;
    position:relative;
    border:1px solid #bababa;
}
.zsmall img{
    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:1px solid #0F9B4E;
}
.zbig img{
    width:800px;
    height:800px;
    position:relative;
}
.zmask{
    position:absolute;
    z-Index:2;
    width:175px;
    height:175px;
    box-sizing: border-box;
    background:#FEDE4F;
    border:1px solid #dadada;
    opacity:0.5;
    filter:alpha(opacity=50);
}

<div class="zoomcont">
    <div class="zsmall" >
        <img src="images/small.jpg"/>
        <div class="zbig">
            <img src="images/big.jpg"/>
        </div>
    </div>
    <div id="zconsole">
        鼠标进入进行局部放大效果
    </div>
</div>

<script>
    var ow=350;
    var oh=350;
    var mw=175;
    var mh=175;
    var bw=800;
    var bh=800;
    //计算放大容器的大小。
    var bigcw=(bw/ow)*mw;
    var bigch=(bh/oh)*mh;
    $(".zbig").css({width:bigcw,height:bigch});
    //绑定鼠标移动事件
    $(".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);
        //显示div蒙版放大范围
        var mask=$(this).find(".zmask");
        if(mask.length==0){
            mask=$("<div class='zmask'></div>");
            mask.appendTo($(this));
        }else{
            mask.css("display","block");
        }
        var mx=offx-mw/2;
        var my=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});
        //大图的偏移位置
        var bx=-(bw/ow)*mx;
        var by=-(bh/oh)*my;
        $(".zbig img").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("鼠标进入进行局部放大效果");
    });
</script>

效果如下:

zoom4.png

到这里,图片局部放大的整个效果就算实现了。可以点击这里查看图片局部放大效果完整效果

放大容器的大小为: (大图大小/小图大小)*mask大小。

放大容器的位置:(大图大小/小图大小)*mask的位置。

通过这两个算法来实现放大位置的对象,大图采用relative定位,通过left,top值来改变现实的大图片部分。

整个div的布局很简练,zsmall容器relative定位,蒙版和放大容器都使用absolute定位进行显示。对于蒙版的宽高,大小图的宽高,都作为参数使用,以后有时间可以把它封装成一个插件,方便使用。本文主要讲解图片局部放大原理,理解原理和算法的实现是本文的目的。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(5420)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1