【JavaScript】实现放大镜效果

最新推荐文章于 2024-04-29 17:01:02 发布

1024A

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量676

点赞数 1

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

本文链接：https://blog.csdn.net/qq_58309844/article/details/126610861

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 1 订阅

订阅专栏

在电商类的网站中，点击商品页，一般会有放大镜以便于放大查看商品细节，用js来实现这个放大镜的效果。

一、展现效果

在这里插入图片描述

二、实现代码

1、html+css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.little{
				width: 640px;
				height: 400px;
				border: 1px solid black;
				position: relative;
			}
			/* 小图 */
			.little img{
				width: 640px;
				height: 400px;
			}
			/* 小放大镜 */
			.little .mark{
				width: 320px;
				height: 200px;
				background-color: yellow;
				opacity: 0.5;
				position: absolute;
				left: 0;
				top: 0;
				/* 默认隐藏 */
				display: none;
			}
			
			/* 大放大镜 */
			.great{
				width: 960px;
				height: 600px;
			    border: 1px solid red;
				overflow: hidden;
				position: relative;
				/* 默认隐藏 */
				display: none;
			}
			.great img{
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<!-- 
		   1、原图宽高比例=缩略图宽高比=放大镜的宽高比 
		   2、大放大镜与小放大镜的倍数=原图与缩略图的倍数
		   3、默认两个放大镜与图片都是左上角重叠
		   4、原图相对于小放大镜反方向移动相应倍数的距离
		-->
		
		<div class="wrapper">
			<!-- 小图:640*400,缩小3倍 -->
			<div class="little">
				<img src="./img/xhr.jpg" alt="">
				<!-- 放大镜：320*200 -->
				<div class="mark"></div>
			</div>
			
			<!-- 大放大镜 -->
			<div class="great">
				<!-- 大图:1920*1200 -->
				<img src="./img/xhr.jpg" alt="">
			</div>
			
		</div>
	</body>
</html>

2.js

<script>
	var _litte=document.querySelector(".little"); //小图框
	var _mark=document.querySelector(".mark");  //小放大镜
	var _great=document.querySelector(".great"); //大放大镜
	var _img=document.querySelector(".great img"); //大图
			
	_litte.onmouseover=function(){
		_great.style.display="block";
		_mark.style.display="block";
	}
	_litte.onmouseout=function(){
		_great.style.display="none";
		_mark.style.display="none";
	}
	_litte.onmousemove=function(event){
		//计算小放大镜的x，y
		var dx=event.clientX-_litte.offsetLeft-_mark.offsetWidth/2;
		var dy=event.clientY-_litte.offsetTop-_mark.offsetHeight/2;
		//到左边
		if(dx<=0){
			dx=0;
		}
		// 到最右边
		if(dx>=_litte.offsetWidth-_mark.offsetWidth){
			dx=_litte.offsetWidth-_mark.offsetWidth;
		}
		_mark.style.left=dx+"px";
		//到上边
		if(dy<=0){
			dy=0;
		}
		//到下边
		if(dy>=_litte.offsetHeight-_mark.offsetHeight){
			dy=_litte.offsetHeight-_mark.offsetHeight;
		}
		_mark.style.top=dy+"px";
				
		_img.style.left=-3*dx+"px";
		_img.style.top=-3*dy+"px";
		}
</script>