博客
关于我
JavaScript_放大镜效果
阅读量:336 次
发布时间:2019-03-04

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

文章目录

效果图:

在这里插入图片描述

在这里插入图片描述

需求分析:

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

源代码:

  • 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部分
  1. 为了简化代码,先封装一些常用的自定义构造函数
<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>
  1. 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中interactive_timeout和wait_timeout的区别
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中json_extract的使用方法
查看>>
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题!
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢?
查看>>
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>