原生JS实现放大镜效果

具体效果图如下所示，鼠标放上去左边会有遮罩层，右边会显示大图片的局部图，并且鼠标移动时，右边的图片也会局部移动，因为右边的图片不是大图，所以放大会失真，显得很模糊，但是没关系，效果出来就好了~~

现在我们就来讲解一下如何实现，会很详细，毕竟自己也是小白科班出生。

1、html：

//左边的div
<div id="smallImg">
	<img src="img/banner4.jpg">
	<div id="floatDiv"></div>    //遮罩层
</div>

//右边的div
<div id="bigImg">
	<img src="img/banner4.jpg">
</div>

2、css ，我调了对齐，但还是乱了，不管了

注意：两个父元素一定要设置position属性，还有最后代码中的 max-width:1300px !important;你们不需要管，之所以写这句是因为引入了其他的css样式文件，影响了图片的宽度，导致效果差强人意。

*{margin:0;padding:0;}

#smallImg{
	width: 300px;
	height:300px;
	position: relative;
}
#smallImg>img{
	width: 300px;
	height: 300px;
}
#floatDiv{
	position: absolute;
	top:0;
	left:0;
	border:1px solid #ddd;
	background-color: #fff;
	opacity: 0.6;
    filter: alpha(opacity = 60);
    display: none;
    cursor: move;
}
#bigImg{
	width: 300px;
    height: 300px;
    position: absolute;
    left: 360px;
    overflow: hidden;
    top: 60px;
    display: none;
}
#bigImg img{
	max-width: 1300px !important;
    position: absolute;
    left: 0;
    top: 0;
}

3、js代码    最重要的部分

A、获取dom元素，其中get是根据id获取元素的函数，最后有声明

var smallImg=get("smallImg"),
    bigBox=get("bigImg"),
    floatDiv=get("floatDiv");
var bigImg=bigBox.children[0];

B、获取小图片的宽高、设置缩放比例、大图片的宽高 、点击区域的宽高

//小图片的宽度和高度
var w=smallImg.offsetWidth;
var h=smallImg.offsetHeight;
//缩放比例
var scale=3;

//设置大图片的大小
bigImg.style.width=w*scale+"px";
bigImg.style.height=h*scale+"px";

//设置鼠标区域的大小
floatDiv.style.width=w / scale+"px";
floatDiv.style.height=h / scale+"px";

C、设置鼠标移入事件，鼠标移入，右边的大图和遮罩层显示

//鼠标进入
smallImg.onmouseover=function(){
   floatDiv.style.display="block";
   bigBox.style.display="block";
}

D、设置鼠标移出事件，鼠标移出，右边的大图和遮罩层隐藏

//鼠标移出
smallImg.onmouseout=function(){
   floatDiv.style.display="none";
   bigBox.style.display="none";
}

F、最重要的鼠标移动事件，思路：1、当鼠标在左边小图片上移动时，遮罩层会跟随鼠标移动，并且右边的大图片也会局部移动。2、要进行边界判断，防止遮罩层移出小图片。

	//鼠标移动
		smallImg.onmousemove=function(ev){
			var e=ev || window.event;
			//clientX获取当前目标离浏览器可视区域的x坐标      offsetWidth获取宽度
			var left=e.clientX-floatDiv.offsetWidth/2;
			var top=e.clientY-floatDiv.offsetHeight/2;

			//做边界处理，防止移动到图片外面
			if(left<=0){
				left=0;
			}else if( left >= smallImg.offsetWidth - floatDiv.offsetWidth ){
				left= smallImg.offsetWidth - floatDiv.offsetWidth;
			}
			if(top<=0){
				top=0;
			}else if( top >= smallImg.offsetHeight - floatDiv.offsetHeight ){
				top= smallImg.offsetHeight - floatDiv.offsetHeight;
			}

			//设置遮罩层的位置
			floatDiv.style.left = left+"px";
			floatDiv.style.top = top+"px";

			//设置大图片的显示位置
			bigImg.style.left=-left*scale+"px";
			bigImg.style.top=-top*scale+"px";
    	}

G、根据id获取元素的方法声明，

//根据id获取元素
    	function get(id){
    		var obj=document.getElementById(id);
    		return obj;
    	}

刚开始写博客，如有不足之处，希望大家多多包含~