前端代码实现放大镜效果

不抽烟的小王

已于 2023-05-05 17:31:45 修改

阅读量377

点赞数

分类专栏： JavaScript 文章标签：前端 javascript html

于 2023-02-06 23:42:15 首次发布

本文链接：https://blog.csdn.net/Achong999/article/details/128910145

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

利用css和js实现页面放大镜效果
像一些淘宝等购物商场
商品放大镜可以更为清晰地观看喜欢的物品

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.yuantu{
				width: 300px;
				height: 300px;
				float: left;
				margin-top: 100px;
				margin-left: 100px;
				position: relative;
				cursor: move;
			}
			img{
				width: 100%;
				height: 100%;
			}
			.fangdatu{
				width: 300px;
				height: 300px;
				float: left;
				margin-top: 100px;
				display: none;
				overflow: hidden;
				position: relative;
			}
			.fangdatu img{
				width: 200%;
				height: 200%;
				position: absolute;
			}
			.fdj{
				width: 100px;
				height: 100px;
				opacity: 0.5;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
			.m{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="yuantu">
			<img src="imgs/01.jpg"/>
			<div class="fdj"></div>
		</div>
		<div class="fangdatu">
			<img src="imgs/01.jpg"/>
		</div>
	</body>
	<script type="text/javascript">
		var yuantu = document.getElementsByClassName("yuantu")[0];
		var fangdatu = document.getElementsByClassName("fangdatu")[0];
		var fdj = document.getElementsByClassName("fdj")[0];
		var img = document.getElementsByTagName("img")[1];
		/*鼠标悬停*/
		yuantu.onmouseenter = function () {
			fdj.className = "fdj m";
			fangdatu.className = "fangdatu m"
		}
		/*鼠标离开*/
		yuantu.onmouseleave = function () {
			fdj.className = "fdj";
			fangdatu.className = "fangdatu"
		}
		/*鼠标移动 监听鼠标位置*/
		yuantu.onmousemove = function (event) {
			var event = event||window.event;
			
			x= event.pageX-yuantu.offsetLeft-fdj.offsetWidth/2;
			y= event.pageY-yuantu.offsetTop-fdj.offsetHeight/2;
			
			if(x<0){
				x=0;
			};
			if(y<0){
				y=0;
			};
			if(x>this.offsetWidth-fdj.offsetWidth){
				x=this.offsetWidth-fdj.offsetWidth;
			};
			if(y>this.offsetHeight-fdj.offsetHeight){
				y=this.offsetHeight-fdj.offsetHeight;
			};
			
			
			fdj.style.left = x+"px";
			fdj.style.top = y+"px";
			
			img.style.left = -x*2+"px";
			img.style.top = -y*2+"px";
		}
	</script>
</html>