JavaScript(京东商品放大镜效果)

最新推荐文章于 2023-07-22 14:26:27 发布

退堂鼓职业选手

最新推荐文章于 2023-07-22 14:26:27 发布

阅读量582

点赞数 2

分类专栏：学习记录JavaScript 文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_45886797/article/details/119447647

版权

学习记录JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JSday13

案例1：京东商品放大镜效果

案例分析：

整个案例可以分为三个功能模块；
鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开时2个盒子隐藏功能；
黄色的遮挡层跟随鼠标移动功能；
移动黄色遮挡层，大图片跟随移动功能。

<html>
	<head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Document</title>
	  <style>
		*{
			margin: 0;
			padding: 0;
		}
		.preview{
			width: 250px;
			height: 250px;
			border: 1px solid #ebebeb;
			margin: 50px 0 0 50px;
			text-align: center;
		}
		.preview_img{
			position: relative;
			width: 250px;
		}
		.mask{
			display: none;
			position: absolute;
			width: 150px;
			height: 150px;
			background-color: rgba(245, 201, 56, 0.4);
			top: 0;
			left: 0;
			border: 1px solid #ccc;
			margin: 50px 0 0 50px;
			cursor: move;
		}
		.big{
			display: none;
			position: absolute;
			width: 600px;
			height: 600px;
			left: 450px;
			top: 20px;
			z-index: 999;
			border: 1px solid #ccc;
			overflow: hidden;
		}
		.big_img{
			position: absolute;  /*添加了定位才可以移动*/
			top: 0;
			left: 0;
			width: 1000px;
		}
	  </style>
	</head>

	<body>
		  <div class="preview">
			  <img src="images/pic2.jpg" alt="" class="preview_img">
			  <div class="mask"></div>
			  <div class="big">
				  <img src="images/pic2.jpg" alt="" class="big_img">
			  </div>
		  </div>
		  <script>
			window.addEventListener('load',function(){
				var preview = document.querySelector('.preview');
				var mask = document.querySelector('.mask');
				var big = document.querySelector('.big');
				//1.当我们鼠标经过preview就显示和隐藏mask遮挡层和big大盒子
				preview.addEventListener('mouseover',function(){
					mask.style.display = 'block';
					big.style.display = 'block';
				})
				preview.addEventListener('mouseout',function(){
					mask.style.display = 'none';
					big.style.display = 'none';
				})
				//2.鼠标移动事件
				preview.addEventListener('mousemove',function(e){
					//(1)先计算出鼠标在盒子内的坐标
					var x = e.pageX - preview.offsetLeft;
					var y = e.pageY - preview.offsetTop;
					//(2)减去盒子宽度和高度的一半(x - mask.offsetWidth / 2)
					//(3)限制遮挡层移动范围
					var maskX = x -mask.offsetWidth / 2;
					var maskY = y -mask.offsetHeight / 2;
					//遮挡层的最大移动距离
					var maskMax = preview.offsetWidth - mask.offsetWidth;  //因为是正方形，width和height用一个就行
					if(maskX <= 0){
						maskX = 0;
					}else if(maskX >= maskMax){
						maskX = maskMax;
					}
					if(maskY <= 0){
						maskY = 0;
					}else if(maskY >= maskMax){
						maskY = maskMax;
					}
					mask.style.left = maskX + 'px';
					mask.style.top = maskY + 'px';
					//3.大图片跟随移动功能
					// 大图片移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
					var bigImg = document.querySelector('.big_img');
					//大图片最大移动距离
					var bigMax = big.offsetWidth - bigImg.offsetWidth;
					//大图片的移动距离
					var bigX = maskX * bigMax / maskMax;
					var bigY = maskY * bigMax / maskMax;
					bigImg.style.left = bigX + 'px';    //这个地方视频上说加-号，我没有加的效果是好的，不清楚？
					bigImg.style.top = bigY + 'px';
				})
			})
		  </script>
	</body>

</html>

退堂鼓职业选手

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(京东商品放大镜效果)

JSday13案例1：京东商品放大镜效果案例分析：整个案例可以分为三个功能模块；鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开时2个盒子隐藏功能；黄色的遮挡层跟随鼠标移动功能；移动黄色遮挡层，大图片跟随移动功能。<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫