电商网站放大镜效果

最新推荐文章于 2022-07-17 21:48:11 发布

Yvan_大风

最新推荐文章于 2022-07-17 21:48:11 发布

阅读量441

点赞数

分类专栏： CSS+JS

本文链接：https://blog.csdn.net/Yvaan_Wind/article/details/103372424

版权

本文介绍了如何创建电商网站中常见的放大镜效果。通过理解其简单原理——鼠标控制小图上的区块移动，预览大图按比例同步移动，以及解决鼠标事件可能因元素层级导致的事件转移问题，我们可以实现这一交互功能。文中还提到了在小图上添加‘盖子’元素来确保事件正确执行。

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

在这里插入图片描述
以前写后端的时候觉得这个效果很有意思，但是那时候还没接触前端，所以一直没开始写。最近逛淘宝京东的时候看到这个放大镜效果的时候，就想自己写一个试试。

原理：
这个效果的原理其实很简单，鼠标控制块的移动，右边预览大图根据小图的比例进行移动展示就好。唯一有坑的地方就在于调用mousemove属性的时候，鼠标和事件源之间存在其他元素，事件容易转移到其他元素上去，所以需要在小图里面加一个“盖子”，让焦点在这个“盖子”上执行，就不会事件溢出。

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<style>
		*{
   
			padding: 0;
			margin: 0;
		}
		.hide{
   
			display: none;
		}
		
		#left{
   
			width: 400px;
			height: 400px;
			margin: 100px;
			background-image: url(../../img/smallAD.jpg);
			float: left;
			position: relative;
		}