用JS写出JS事件中京东图片放大特效

图片放大特效

• 准备两张相同的图片，小图和大图。

• 小图显示在商品的展示区域。

• 大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。

• 编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。

• 当鼠标在小图上移动时，显示鼠标的遮罩和大图。

• 当鼠标移动时，让遮罩跟着在小图中进行移动。

• 限定遮罩在小图中的可移动范围。

• 根据遮罩在小图中的覆盖范围，按比例的显示大图。

CSS页面代码：

	<style >
			* {
				margin: 0;
				padding: 0;
			}
			.goods{
				margin: 200px;
				width: 350px;
				position: relative;
			}
			.goods-small{
				position: relative;
			}
			.small-mask{
				display: none;
				width: 200px;
				height: 200px;
				opacity: .5;
				background:#fad73d;
				
				cursor: move;
				position: absolute;
				z-index: 9;
			}
			.small-img{
				display: block;
			}
			.goods-big{
				display: none;
				width: 500px;
				height: 500px;
				position: absolute;
				overflow: hidden;
				left: 360px;
				top: 0;
				z-index: 9;
			}
			.big-img {
      position: absolute;
    }

    .show {
      display: block;
    }
		</style>

 HTML页面代码：

	<div class="goods">
			<div class="goods-small">
				<div class="small-mask"></div>
					<img class="small-img"src="https://img14.360buyimg.com/n1/jfs/t1/132972/1/6982/99132/5f3795a7E4f8c5006/02114b2aa52af6c8.jpg.avif" alt="">
				</div>
				<div class="goods-big">
					<img class="big-img"src="https://img14.360buyimg.com/n1/s546x546_jfs/t1/132972/1/6982/99132/5f3795a7E4f8c5006/02114b2aa52af6c8.jpg.avif" alt="">
				</div>
			</div>

JS页面代码：

<script>
				function getEleByClass(classname){
					return document.getElementsByClassName(classname)[0];
				}
				let _small_box=getEleByClass('goods-small');
				let _big_box=getEleByClass('goods-big');
				let _mask=getEleByClass('small-mask');
				let _goods=getEleByClass('goods');
				let _big_img=getEleByClass('big-img');
				// 给小图片添加鼠标移入事件
				_small_box.onmouseover=function(){
					_mask.classList.add('show');
					_big_box.classList.add('show');
				}
				// 给小图片添加鼠标移出事件
				_small_box.onmouseout=function(){
					_mask.classList.remove('show');
					_big_box.classList.remove('show');
				}
				// 监听小图片内的鼠标移动事件
				_small_box.onmousemove=function(e){
					let _pageX=e.pageX,_pageY=e.pageY,
					_mouseX=_pageX-_goods.offsetLeft,
					_mouseY=_pageY-_goods.offsetTop;
					let _mask_style = window.getComputedStyle(_mask, null);
					let _maskX=_mouseX-parseInt(_mask_style.width)/2;
					let _maskY=_mouseY-parseInt(_mask_style.height)/2;
					// 遮罩边界限定 不允许超出
					if(_maskX<0){
						_maskX=0;
					}
					let diff_width=_small_box.offsetWidth-_mask.offsetWidth;
					if(_maskX>diff_width){
						_maskX=diff_width;
					}
					if(_maskY<0){
						_maskY=0;
					}
					let diff_height=_small_box.offsetHeight-_mask.offsetHeight;
					if(_maskY>diff_height){
						_maskY=diff_height;
					}
					_mask.style.left=_maskX+'px';
					_mask.style.top=_maskY+'px';
					// 大图片移动的范围值
					let _big_moveRX=_big_img.offsetWidth-_big_box.offsetWidth;
					let _big_moveRY=_big_img.offsetHeight-_big_box.offsetHeight;
					 // 计算遮罩移动 1px 大图需要移动的距离比例值
					 let _ratioX=_big_moveRX/diff_width;
					 let _ratioY=_big_moveRY/diff_height;
					// 计算大图移动的值
					let _big_moveX=_ratioX*_maskX;
					let _big_moveY=_ratioY*_maskY;
					 // 大图移动方向与遮罩移动方向相反
					 _big_img.style.left=-_big_moveX+'px';
					 _big_img.style.top=-_big_moveY+'px';
				}
			</script>

运行结果如图：

 因为图移动是动态的，截图无法展现出来，如有需要自行运行查看结果。