原生js实现放大镜效果

Posted 2020-09-13 heyujun-

 放大镜效果主要涉及3个鼠标事件：

1.onmouseover，鼠标移入浮动小方块和显示放大的区域显示；

2.onmousemove，鼠标移动，小方块和放大区域一起移动；

3.onmouseout，鼠标移除小方块和放大区域消失。

其实放大镜效果最主要的是小方块与放大区域的比例及位置：

	<div id="small_box">
		<div class="small_Pic">
			<div id="float_box"></div>
			<img src="1.png" alt="" />
		</div>
	</div>
	<div id="big_box">
		<div class="big_Pic">
			<img src="1.png" alt="" />
		</div>
	</div>

	*{padding: 0;margin: 0;}
	img{border: none;}
	#small_box{
		width: 350px;
		height: 175px;
		border: 1px solid #666;
		overflow: hidden;
		position: relative;
		top:200px;
		left: 100px;
		display: inline-block;
	}
	.small_Pic img{
		width: 350px;
		height: 175px;
	}
	#big_box{
		width: 350px;
		height: 175px;
		border: 1px solid #666;
		position: absolute;
		top:200px;
		left: 500px;
		overflow: hidden;
		display: none;
	}
	.big_Pic img{
		width: 1400px;
		height: 700px;
		position: absolute;
	}
	#float_box{
		width: 100px;
		height: 50px;
		background-color: #000;
		opacity: 0.5;
		position: absolute;
	    display: none;
		cursor: move;
		z-index: 99;
	}

js代码：

	window.onload=function(){
		/*获取页面元素*/
		var small_box=document.getElementById(\'small_box\');
		var float_box=document.getElementById(\'float_box\');
		var big_box=document.getElementById(\'big_box\');
		var big_box_img=big_box.getElementsByTagName(\'img\')[0];

        /*鼠标移入时，放快与放大区域显示*/
		small_box.onmouseover=function(e){
			float_box.style.display=\'block\';
			big_box.style.display=\'block\';
		}

		/*鼠标移动时触发*/
		small_box.onmousemove=function(e){
			e=e||window.event;  
			//e.clientX是被触发时鼠标指针向对于浏览器页面的水平坐标
			var float_box_left=e.clientX-small_box.offsetLeft-50;  //求出鼠标位于浮动层的中心
			var float_box_top=e.clientY-small_box.offsetTop-25;

			var left=float_box.offsetLeft*big_box_img.offsetWidth/small_box.offsetWidth;//求上图的x2值，即图片偏移方框的左距
			var top=float_box.offsetTop*big_box_img.offsetHeight/small_box.offsetHeight;//求上图的x2值，即图片偏移方框的高度
			 big_box_img.style.left=-left+\'px\';
			 big_box_img.style.top=-top+\'px\';

			 /*控制浮动层不能超出方框的范围*/
			if(float_box_left<0){
				float_box.style.left=0;
			}
			else if(float_box_left>(small_box.offsetWidth-100)){
				float_box.style.left=small_box.offsetWidth-100+\'px\';
			}
			else{
				float_box.style.left=float_box_left+\'px\';
			}
			if(float_box_top<0){
				float_box.style.top=0;
			}
			else if(float_box_top>(small_box.offsetHeight-50)){
				float_box.style.top=small_box.offsetHeight-50+\'px\';
			}
			else{
				float_box.style.top=float_box_top+\'px\';
			}
		}

		/*鼠标移出时触发*/
		small_box.onmouseout=function(){
			float_box.style.display=\'none\';
			big_box.style.display=\'none\';
		}
	}

效果是实现了，但是由于除数时有小数点的偏差，可能效果也有一点偏差，大致就是这样。最重要的还是实现效果中的思维逻辑。

推荐网址：http://www.imooc.com/learn/32，放大镜教学视频。