【JavaScript】实现放大镜效果

最新推荐文章于 2025-05-22 14:38:07 发布

原创

最新推荐文章于 2025-05-22 14:38:07 发布 · 809 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

本文介绍了如何使用JavaScript和CSS在电商网站上创建商品页面的放大镜效果，详细阐述了html和css的布局以及JavaScript代码的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

文章目录

一、展现效果
二、实现代码
- 1、html+css
- 2.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