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/

你可能感兴趣的文章

mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制，你真的明白吗

MySql 查询以逗号分隔的字符串的方法（正则）

MySQL 查询优化：提速查询效率的13大秘籍（避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化）（上）

mysql 查询，正数降序排序，负数升序排序

MySQL 树形结构根据指定节点获取其下属的所有子节点（包含路径上的枝干节点和叶子节点）...

mysql 死锁 Deadlock found when trying to get lock； try restarting transaction

mysql 死锁(先delete 后insert)日志分析

MySQL 死锁了，怎么办？

MySQL 深度分页性能急剧下降，该如何优化？

MySQL 深度分页性能急剧下降，该如何优化？

MySQL 添加列，修改列，删除列

mysql 添加索引

MySQL 添加索引，删除索引及其用法

MySQL 用 limit 为什么会影响性能？

MySQL 用 limit 为什么会影响性能？有什么优化方案？

MySQL 用户权限管理：授权、撤销、密码更新和用户删除（图文解析）

mysql 用户管理和权限设置

MySQL 的 varchar 水真的太深了！

mysql 的GROUP_CONCAT函数的使用（group_by 如何显示分组之前的数据）

MySQL 的instr函数