JavaScript_放大镜效果-白红宇

JavaScript_放大镜效果

阅读量：337 次

发布时间：2019-03-04

本文共 5859 字，大约阅读时间需要 19 分钟。

文章目录

效果图：

在这里插入图片描述

需求分析：

鼠标移入小盒子里面，大盒子显示,mask显示
鼠标移出小盒子，大盒子隐藏，mask隐藏
鼠标在小盒子里面移动，mask跟随鼠标移动，鼠标在mask中间
mask不能超出小盒子范围
鼠标在小盒子里面移动，大盒子显示大图的相应部分

源代码：

HTML部分

<div id="box" >	<div id="small"><!-- 小图片所在的盒子 -->		<img src="001.jpg" alt="" /><!-- 小图片:350*350 -->		<div id="mask"></div><!-- 遮罩层:175*175 -->	</div>	<div id="big"><!-- 大图片所在的盒子:400*400 -->		<img src="0001.jpg" alt="" id="bigImg"/><!-- 大图片:800*800 -->	</div></div>

css部分

<style>*{    	margin: 0;	padding: 0;}#box{    	width: 350px;	height: 350px;	border: 1px solid #000;	margin: 200px;	position: relative;}#big{    	width: 400px;	height: 400px;	border: 1px solid #000;	overflow: hidden;	position: absolute;	top:0;	left : 360px;	display: none;}#mask{    	width: 175px;	height: 175px;	background: paleturquoise;	position: absolute;	left:0;	top: 0;	opacity: 0.3;	display: none;	cursor: move;}#small{    	position: relative;}#bigImg{    	position: absolute;	left: 0;	top: 0;}  </style>

JavaScript部分

为了简化代码，先封装一些常用的自定义构造函数

<script>// 根据id获取元素function $id(id){        return document.getElementById(id);}// 返回页面被卷曲的距离：垂直,水平function scroll(){        return {            top:document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset,        left:document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset    }}    </script>

js主体部分，需要用到封装的函数，调用即可

<script>// 获取相关元素var box = $id('box');//总容器var smallDiv = $id('small');//小盒子var maskDiv = $id('mask');//遮罩层var bigDiv = $id('big');//大盒子var bigImg = $id('bigImg');//大图片 // 1 鼠标移入小盒子里面smallDiv.onmouseenter = function(){    	// 大盒子显示,mask显示	bigDiv.style.display = 'block';	maskDiv.style.display = 'block';}// 2 鼠标移出小盒子smallDiv.onmouseleave = function(){    	// 大盒子隐藏，mask隐藏	bigDiv.style.display = "none";	maskDiv.style.display = "none";}// 3 鼠标在小盒子里面移动smallDiv.onmousemove = function(e){    	e = window.event || e;	// mask跟随鼠标移动，鼠标在mask中间	// 如果不出滚动条:e.clientY = e.pageY	// 如果出了滚动条:e.clientY != e.pageY	// 建议使用：e.pageY = e.clientY + scrollTop;	var left = (e.clientX+scroll().left) - box.offsetLeft;	var top = (e.clientY+scroll().top) - box.offsetTop;	// 要鼠标在mask中间	left = left - maskDiv.offsetWidth/2;	top = top - maskDiv.offsetWidth/2;	// 4 边界监测:mask不能超出小盒子范围	if(left<0){    		left = 0;	}	if(left>smallDiv.offsetWidth-maskDiv.offsetWidth){    		left = smallDiv.offsetWidth-maskDiv.offsetWidth	}	if(top<0){    		top = 0;	}	if(top>smallDiv.offsetHeight-maskDiv.offsetHeight){    		top=smallDiv.offsetHeight-maskDiv.offsetHeight	}	// 定位mask	maskDiv.style.left = left + 'px';	maskDiv.style.top = top + 'px';	// 5 鼠标在小盒子里面移动，大盒子显示大图的相应部分	// left/smallDiv.offsetWidth = bigImg左移的距离/bigImg.offsetWidth	bigImg.style.left = -left/smallDiv.offsetWidth*bigImg.offsetWidth+"px";	// top/smallDiv.offsetHeight = bigImg上移的距离/bigImg.offsetHeight	bigImg.style.top = -top/smallDiv.offsetHeight*bigImg.offsetHeight+"px";}</script>

总代码

<!DOCTYPE html><html><head>	<meta charset="UTF-8">	<title>09放大镜</title></head><style type="text/css">	* {    		margin: 0;		padding: 0;	}	#box {    		width: 350px;		height: 350px;		border: 1px solid #000;		margin: 200px;		position: relative;	}	#big {    		width: 400px;		height: 400px;		border: 1px solid #000;		overflow: hidden;		position: absolute;		top: 0;		left: 360px;		display: none;	}	#mask {    		width: 175px;		height: 175px;		background: paleturquoise;		position: absolute;		left: 0;		top: 0;		opacity: 0.3;		display: none;		cursor: move;	}	#small {    		position: relative;	}	#bigImg {    		position: absolute;		left: 0;		top: 0;	}</style><body>	<div id="box">		<div id="small">			<!-- 小图片所在的盒子 -->			<img src="001.jpg" alt="" /><!-- 小图片:350*350 -->			<div id="mask"></div><!-- 遮罩层:175*175 -->		</div>		<div id="big">			<!-- 大图片所在的盒子:400*400 -->			<img src="0001.jpg" alt="" id="bigImg" /><!-- 大图片:800*800 -->		</div>	</div>	<script>		// 根据id获取元素		function $id(id) {    			return document.getElementById(id);		}		// 返回页面被卷曲的距离：垂直,水平		function scroll() {    			return {    				top: document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset,				left: document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset			}		}		// 获取相关元素		var box = $id('box');//总容器		var smallDiv = $id('small');//小盒子		var maskDiv = $id('mask');//遮罩层		var bigDiv = $id('big');//大盒子		var bigImg = $id('bigImg');//大图片 		// 1 鼠标移入小盒子里面		smallDiv.onmouseenter = function () {    			// 大盒子显示,mask显示			bigDiv.style.display = 'block';			maskDiv.style.display = 'block';		}		// 2 鼠标移出小盒子		smallDiv.onmouseleave = function () {    			// 大盒子隐藏，mask隐藏			bigDiv.style.display = "none";			maskDiv.style.display = "none";		}		// 3 鼠标在小盒子里面移动		smallDiv.onmousemove = function (e) {    			e = window.event || e;			// mask跟随鼠标移动，鼠标在mask中间			// 如果不出滚动条:e.clientY = e.pageY			// 如果出了滚动条:e.clientY != e.pageY			// 建议使用：e.pageY = e.clientY + scrollTop;			var left = (e.clientX + scroll().left) - box.offsetLeft;			var top = (e.clientY + scroll().top) - box.offsetTop;			// 要鼠标在mask中间			left = left - maskDiv.offsetWidth / 2;			top = top - maskDiv.offsetWidth / 2;			// 4 边界监测:mask不能超出小盒子范围			if (left < 0) {    				left = 0;			}			if (left > smallDiv.offsetWidth - maskDiv.offsetWidth) {    				left = smallDiv.offsetWidth - maskDiv.offsetWidth			}			if (top < 0) {    				top = 0;			}			if (top > smallDiv.offsetHeight - maskDiv.offsetHeight) {    				top = smallDiv.offsetHeight - maskDiv.offsetHeight			}			// 定位mask			maskDiv.style.left = left + 'px';			maskDiv.style.top = top + 'px';			// 5 鼠标在小盒子里面移动，大盒子显示大图的相应部分			// left/smallDiv.offsetWidth = bigImg左移的距离/bigImg.offsetWidth			bigImg.style.left = -left / smallDiv.offsetWidth * bigImg.offsetWidth + "px";			// top/smallDiv.offsetHeight = bigImg上移的距离/bigImg.offsetHeight			bigImg.style.top = -top / smallDiv.offsetHeight * bigImg.offsetHeight + "px";		}	</script></body></html>

所用图片：

在这里插入图片描述

由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦

转载地址：http://kyxh.baihongyu.com/

你可能感兴趣的文章