利用js实现放大镜

余语-

于 2022-08-29 16:42:37 发布

阅读量640

点赞数

文章标签： javascript 前端 html css css3

本文链接：https://blog.csdn.net/hhazjyh5210/article/details/126587675

版权

本文介绍了如何通过JavaScript、CSS和HTML实现放大镜功能。关键在于保持放大镜、图片及放大图片之间的比例关系，确保在鼠标悬停时，放大镜能够正确显示图片的放大效果。

摘要由CSDN通过智能技术生成

主要是通过了最基本的JS+CSS实现放大镜功能

一、放大镜部分

放大镜主要有两部分，一部分是小放大镜，一部分是大放大镜，都是默认隐藏，当悬浮时出现；

二、图片部分

图片原图为正常大小，放大镜所显示图片为倍数增加大小

切记：无论放大镜还是图片都是以倍数关系进行放大显示，若不是则会出现放大之后出现大小放大镜无法一致的问题

CSS代码：

.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;
			}