【jQuery】前端项目实践案例6——制作产品放大镜效果（仿京东淘宝图片效果）

最新推荐文章于 2024-07-14 18:00:00 发布

逍遥小丸子

最新推荐文章于 2024-07-14 18:00:00 发布

阅读量2.4k

点赞数 8

分类专栏：使用jQuery简化客户端开发文章标签：前端 jquery javascript 放大镜

本文链接：https://blog.csdn.net/dnruanjian/article/details/121884927

版权

使用jQuery简化客户端开发专栏收录该内容

16 篇文章 16 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

使用jQuery制作产品放大镜效果实现效果：

使用jQuery制作产品放大镜效果实现原理：

通过设置图像的 CSS 属性（ left 和 top ），来实现图像的移动。

使用jQuery制作产品放大镜效果实现思路：

（1）div+css布局，制作小图、放大镜和大图的布局。

（2）放大镜和大图，默认隐藏，鼠标移动到小图上时，显示放大镜和大图。

（3）鼠标在小图上移动时，控制放大镜和大图，同时进行移动

使用jQuery制作制作产品放大镜效果需要掌握的知识点：

（1）基础div+css布局

（2）jquery 基础事件的使用：mouseenter 、mouseleave 、mousemove

（3）获取鼠标元素的位置：event.pageX 属性和 event.pageY 属性

（4）获取匹配元素在当前视口的相对偏移：offset() 方法的使用

使用jQuery制作制作产品放大镜效果实现步骤：

第一步：制作网页内容（小图、放大镜、大图）

	<body>
		<div id="fdj">
			<div id="small"><!-- 这里用来放小图片 -->
				<img src="img/big.jpg" />
				<div id="mark"></div><!-- 这个用来作为放大镜 -->
			</div>
			<div id="big"><!-- 这里用来放大图片 -->
				<img src="img/big.jpg" />
			</div>
		</div>
	</body>

第二步，添加 CSS样式

		<style type="text/css">
			*{margin: 0; padding: 0;}
			#fdj {			
				width: 800px;
				background-color: pink;
				margin: 20px auto;
				overflow: hidden;  /* 清除里面small和big两个div浮动，带来的浮动塌陷 */
			}

			#small {
				position: relative;
				width: 250px;
				height: 250px;
				border: 1px solid red;
				float: left;
			}

			#small img {
				width: 100%;
				height: 100%;
			}

			#big {
				position: relative;
				width: 500px;		/* 注意,大图的尺寸和小图的宽高,成比例放大 */
				height: 500px;
				border: 1px solid black;
				float: left;
				margin-left: 10px;
				display: none;		/* 设置大图所在的div,默认隐藏 */
				overflow: hidden;	/* 设置图片溢出部分，隐藏 */
			}

			#big img {
				position: absolute;
			}

			#mark {
				background-color: yellow;
				opacity: 0.5;
				width: 50px;
				height: 50px;
				position: absolute;
				display: none;	/* 设置遮罩层默认隐藏 */
			}
		</style>

第三步：引入jQuery文件

<script src="js/jquery-3.4.1.min.js"></script><!--引入jquery-->

第四步：写jquery代码

		<script>
			$(document).ready(function() {
				$("#small").mouseenter(function() { //鼠标移到small上，控制小div显示
					$("#mark").show();
					$("#big").show();
				});
				$("#small").mouseleave(function() {
					$("#mark").hide() //鼠标移出small时，控制小div隐藏
					$("#big").hide();
				});
				
				$("#small").mousemove(function(event){  //鼠标在samll上移动时，控制遮罩层小div移动，同时控制大图移动
					//获取遮罩层，mark的位置
					var markLeft = event.pageX-$(this).offset().left-25;  //数字25是遮罩层宽度的一半,实现鼠标居中
					var markTop = event.pageY-$(this).offset().top-25;
					//设置不要超出边界
					if(markLeft<=0){
						markLeft = 0;
					}
					if(markLeft>=200){		//200数字的来源：samll的宽度-遮罩层的宽度
						markLeft = 200;
					}
					if(markTop<=0){
						markTop = 0;
					}
					if(markTop>=200){//200数字的来源：samll的高度-遮罩层的高度
						markTop = 200;
					}
					//改变遮罩层的位置
					$("#mark").css({						
						left:markLeft,
						top:markTop
					})
					//改变放大图片的位置
					$("#big img").css({			//注意，大图的移动方向，和遮罩层的移动方向是相反的
						left: -2 * markLeft,
						top: -2 * markTop
					})
				})
			})
		</script>

代码说明：

event.pageX 属性：返回鼠标指针的位置，相对于文档的左边缘。

offset() 方法：返回或设置匹配元素相对于文档的偏移（位置）。该方法返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。