原生JS实现电商平台图片放大（放大镜功能）

最新推荐文章于 2023-06-07 17:11:19 发布

原创

最新推荐文章于 2023-06-07 17:11:19 发布 · 2.4k 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#图片放大 #电商图片放大 #JS API

本文介绍了如何使用原生JavaScript实现电商平台图片放大功能，即放大镜效果。通过解析某宝的实例，详细讲解了offset家族和client家族等API的用法，并给出了实现该功能的步骤和关键代码，帮助开发者理解并实现图片放大功能。

先看看某宝的效果

好多美女。。。我们是来干正事的，如图当我们移动蓝色框，右边随着移动

我们可以利用值准备一张图片，使用transform:scale(*)来实现放大缩小；也可以准备两张图片，一张大一张小的来实现，这里我准备了两张(400400,800800)

结构

small为400的图片，big为800的图片

	<div class="box">
		<!-- 存放左边图片和标记小块 -->
		<div class="small_cont">
			<img src="images/small.jpg" alt="" class="small_img">
			<div class="mark"></div>
			<!-- mark相对small_cont定位 -->
			<div class="big">
				<img src="images/big.jpg" alt="" class="big_img">
				<!-- img相对big定位 -->
			</div>
		</div>
	</div>

标记块/小盒子 = 大盒子/图片
可以在JS进行控制，也可以在css控制，为了方便在css控制
样式我们需要根据具体情况具体分析

	<style>
	/* 保持浏览器一致性 */
		*{
   
   
			margin: 0;
			padding: 0;
		}
	/* 去掉基线 */
		img{
   
   
			vertical-align: top;
		}
		.box{
   
   
			padding: 10px;
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			margin-top: 10px;
			margin-left: 10px;
		}
		.small_cont{
   
   
			width: 400px;
			height: 400px;
			position: relative;
		}
		.mark{
   
   
			width: 200px;
			height: 200px;
			background<