简易放大镜代码

最新推荐文章于 2022-08-17 20:41:50 发布

yushiyzz

最新推荐文章于 2022-08-17 20:41:50 发布

阅读量1.6k

点赞数

文章标签：放大镜商城 JS HTML 前端

本文链接：https://blog.csdn.net/yushiyzz/article/details/88048732

版权

JS和HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript">
		window.onload = function(){
			//1. 获取大盒子
			let oBigBox = $('#div1');
			//2. 获取小图所在的盒子
			let oSmallPic = $('.small_pic');
			//3. 获取遮罩
			let oMark = $('.mark');
			//4. 获取滑块
			let oFloat = $('.float_layer');
			//5. 大图所在盒子
			let oBigPic = $('.big_pic');
			//6. 大图
			let oBigImg = $('.big_pic img');
			
			//7.给遮罩添加移入事件
			oMark.onmouseenter = function(){
				oFloat.style.display = 'block';
				oBigPic.style.display = 'block';
			}
			//8.给遮罩添加移出事件
			oMark.onmouseleave = function(){
				oFloat.style.display = 'none';
				oBigPic.style.display = 'none';
			}
			//9. 给遮罩添加移动事件
			oMark.onmousemove = function(evt){
				let e = evt || window.event;
				let left = e.pageX - oBigBox.offsetLeft - oSmallPic.offsetLeft - oFloat.offsetWidth / 2;
				let top = e.pageY - oBigBox.offsetTop - oSmallPic.offsetTop - oFloat.offsetHeight / 2;
				
				//边界
				if(left <= 0){
					left = 0;
				}else if(left >= this.offsetWidth - oFloat.offsetWidth){
					left = this.offsetWidth - oFloat.offsetWidth;
				}
				if(top <= 0){
					top = 0;
				}else if(top >= this.offsetHeight - oFloat.offsetHeight){
					top = this.offsetHeight - oFloat.offsetHeight;
				}
				oFloat.style.left = left + 'px';
				oFloat.style.top = top + 'px';
				
				//求滑块在小图上的移动比例
				let pX = left / (this.offsetWidth - oFloat.offsetWidth);
				let pY = top / (this.offsetHeight - oFloat.offsetHeight);
				//设置大图移动
				oBigImg.style.left = - pX * (oBigImg.offsetWidth - oBigPic.offsetWidth) + 'px';
				oBigImg.style.top = - pY * (oBigImg.offsetHeight - oBigPic.offsetHeight) + 'px';
			}
		}
		function $(select){
			return document.querySelector(select);
		}
		</script>
	</head>
	<body>
		<div id="div1">
			<div class="small_pic">
				<span class="mark"></span>   <!--遮罩层-->
				<span class="float_layer"></span>
				<img src="img/small.jpg" />
			</div>
			<div class="big_pic">
				<img src="img/big.jpg" />
			</div>
		</div>
	</body>
</html>

CSS

#div1 {
	width: 171px;
	height: 256px;
	padding: 5px;
	border: 1px solid #ccc;
	position: relative;
}

#div1 .small_pic {
	width: 171px;
	height: 256px;
	background: #eee;
	position: relative;
}

#div1 .float_layer {
	width: 50px;
	height: 50px;
	border: 1px solid #000;
	background: #fff;
	filter: alpha(opacity: 30);
	opacity: 0.3;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

#div1 .mark {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	left: 0px;
	top: 0px;
	background: red;
	filter: alpha(opacity: 0);
	opacity: 0;
}

#div1 .big_pic {
	position: absolute;
	top: -1px;
	left: 215px;
	width: 171px;
	height: 256px;
	overflow: hidden;
	border: 2px solid #CCC;
	display: none;
}

#div1 .big_pic img {
	position: absolute;
	top: -30px;
	left: -80px;
}

yushiyzz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简易放大镜代码

JS和HTML&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=&quot
复制链接

扫一扫