js实现放大镜效果

最新推荐文章于 2024-07-10 10:06:23 发布

敲出真谛

最新推荐文章于 2024-07-10 10:06:23 发布

阅读量3.6k

点赞数 1

分类专栏： html css js 文章标签：放大镜

本文链接：https://blog.csdn.net/qq_36818627/article/details/81605785

版权

css 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

html

7 篇文章 1 订阅

订阅专栏

本片博客的技术栈涉及布局中的offsetxx相关的操作和子绝父相的小技巧使用，以及要想使用top/left必须使用定位等思想。

代码如下：

<!DOCTYPE html>
<!--create by ydj on 2018-08-12-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 350px;
				height: 350px;
				margin: 100px;
				border: 1px solid #ccc;
				position: relative;
			}
			.big{
				width: 450px;
				height: 450px;
				position: absolute;
				top: 0;
				left: 360px;
				border: 1px solid #ccc;
				overflow: hidden;
				display: none;
			}
			.mask{
				width: 100px;
				height: 100px;
				background: rgba(255,255,0,0.4);
				position: absolute;
				top: 0;
				left: 0;
				/*鼠标的样式*/
				cursor: move;
				display: none;
			}
			.small{
				position: relative;
			}
			.big img{
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div class="box" id="fdj">
			<!--小盒子的布局-->
			<div class="small">
				<img src="images/001.jpg"/>
				<div class="mask"></div>
			</div>
			<div class="big">
				<img src="images/0001.jpg"/>
			</div>
		</div>
	</body>
</html>
<script>
	// 1. 获取外面的父级盒子
	var fdj = document.getElementById("fdj");
	// 2.获取小的图片
	var small = fdj.children[0];
	// 3.获取容纳大图片的盒子
	var big = fdj.children[1];
	// 4.获取遮罩
	var mask = small.children[1];
	// 5.获取大的那张图片
	var bigImage = big.children[0];
	
	// 6.鼠标经过小的图片的时候显示
	small.onmouseover = function(){
		mask.style.display = "block";
		big.style.display = "block";
	}
	// 7. 鼠标离开时隐藏
	small.onmouseout = function(){
		mask.style.display = "none";
		big.style.display = "none";
	}
	// 8 鼠标移动
	var x = 0;
	var y = 0;
	small.onmousemove = function(event){
//		alert("youzemel ")
		var event = event || window.event;
		// 9.获取在盒子内部的坐标    本身定位了，这里换用父亲边框到body边框的距离  显示在遮罩的中间
		x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2;
		y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2;
		console.log("x = ",x);
		console.log("y = ",y);
		// 10.增加限制条件
		if(x < 0){
			x = 0;
		}else if(x > small.offsetWidth - mask.offsetWidth){
			x = small.offsetWidth - mask.offsetWidth;
		}
		if(y < 0){
			y = 0;
		}else if(y > small.offsetHeight - mask.offsetHeight){
			y = small.offsetHeight-mask.offsetHeight;
		}
		mask.style.left = x + "px";
		mask.style.top = y + "px";
		// 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位，后来想想只有定位的盒子才有top/left值
		bigImage.style.left = -x*big.offsetWidth/small.offsetWidth +"px";
		bigImage.style.top = -y*big.offsetHeight/small.offsetHeight + "px";
		
	}
</script>

效果如下：