图片放大镜特效

分享最近写的一个图片放大镜的特效，原理很简单，仅供参考：

在一个div里，分为两个作用域，一个用于显示缩略图（放小图的，这里我们叫做A），一个用于显示放大后的图（放大图的，这里我们叫做B）；

在A里，有一个缩略图（A1）和一个悬浮遮挡层（A2），在B里，是一个放大的图（B1）；

这里我们需要注意的是A2/A1=B1/B，意思是在两个作用域里小框跟大框的比例是相等的，这是等比放大的原理。

剩下的就不多描述，基本就是控制div的显示与隐藏，各个div与图片的大小视实际情况而定。

ps：需要导入jquery，剩下的自己补充下图片路径就能看到效果了

<div>
	<div class="imageItem">
		<img src="#">
		<div class="image-hover"></div>
	</div>
	<div class="enlargeItem">
		<img src="#">
	</div>
</div>
<script>
enLarge($(".imageItem"),$(".enlargeItem"));
</script>

　　

/* 放大特效选择区域 */
.imageItem{
	position: relative;
	 100%;
	height: auto;
	margin-bottom: 15px;
	font-size: 0;
	z-index: 1;
	text-indent: 0;
	cursor: pointer;
}
img{
	position: relative;
	 100%;
	z-index: 10;
	text-indent: 0;
	visibility: visible;
	overflow: hidden;
}

.image-hover{
	position: absolute;
	top: 0;
	left: 0;
	 130px;
	height: 130px;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid #aaa;
	opacity: 0.5;
	z-index: 10;
	visibility: hidden;
	/* transition: all ease-in;
    -webkit-transition: all ease-in; */
}

.enlargeItem{
	position: absolute;
	 260px;
	height: 260px;
	z-index: 20;
	top: 50px;
	right: -270px;
	overflow: hidden;
	display: none;
}
.enlargeItem img{
	position: absolute;
	 1000px;
	height: auto;
}

　　

function enLarge(outarea,enlargearea){//(作用域A，作用域B)
        outarea.on("mouseover", function(e) {//悬浮在作用域上
            e.stopPropagation();
            $(this).parent().find(".image-hover").css({"visibility":"visible"});
        })
        outarea.on("mouseleave", function(e) {//鼠标离开作用域关闭放大
            e.stopPropagation();
            bigW = enlargearea.hide();
            $(this).parent().find(".image-hover").css({"visibility":"hidden"});
        })
        outarea.on("mousemove",function(e){//鼠标在作用域上移动开启放大
                    e.stopPropagation();
                    bigW = enlargearea.show();
                    var picT,picL,bigT,bigL;
                    var picW = $(this).width(),
                        picH = $(this).height(),
                        bigW = enlargearea.find("img").width();
                        enlargearea.find("img").css("height",bigW/(picW/picH));
                        bigH = bigW/(picW/picH);
                    //获取鼠标相对图片的坐标
                    var xx = e.pageX-$(this).offset().left;  
                    var yy = e.pageY-$(this).offset().top;
                    
                    if(xx<=65){
                        picL = 0;
                        bigL = 0;
                    }else if(xx>=(picW-65)){
                        picL = picW-130;
                        bigL = -(picL/picW*bigW);
                    }else if(65<xx<(picW-65)){
                        picL = xx-65;
                        bigL = -(picL/picW*bigW);
                    }
                    
                    if(yy<=65){
                        picT = 0;
                        bigT = 0;
                    }else if(yy>=(picH-65)){
                        picT = picH-130;
                        bigT = -(picT/picH*bigH);
                    }else if(65<yy<(picH-65)){
                        picT = yy-65;
                        bigT = -(picT/picH*bigH);
                    }
                    $(this).parent().find(".image-hover").css({"top":picT,"left":picL});
                    enlargearea.find("img").css({top: bigT,left:bigL});
                })
    }

以下是实际效果图：