商品的放大镜功能

商品的放大镜功能

废话不多说，先看css样式

<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				position: absolute;
				top: 30px;
				left: 50px;
				width: 300px;
				height: 300px;
				overflow: hidden;
			}
			.box img {
				width: 100%;
				height: 100%;
			}
			.box .zhezhao {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 60px;
				height: 60px;
				cursor: move;
				background-color: rgba(222,184,135,0.4);
			}
			.odiv {
				display: none;
				position: absolute;
				top: 30px;
				left: 360px;
				width: 300px;
				height:300px;
				border: 1px #0783E6 solid;
				overflow: hidden;
			}
			.odiv img {
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>

html内容

<div class="box">
			<!-- 请更改这里的图片，尽量使用高清图 -->
			<img src="./img/32BB58A2BB884AAA17053F4AA56_F2F28634_3E160.jpg" />
			<div class="zhezhao"></div>
		</div>
		<div class="odiv">
			<!-- 这个图片和上面的一样 -->
			<img class="maxImg" src="./img/32BB58A2BB884AAA17053F4AA56_F2F28634_3E160.jpg" />
		</div>

js功能

<script>
			var box = document.querySelector('.box');
			var zz = document.querySelector('.zhezhao');
			var odiv = document.querySelector('.odiv');
			var maximg = document.querySelector('.maxImg');
			// 鼠标经过显示
			box.addEventListener('mouseover',function(e){
				zz.style.display = 'block';
				odiv.style.display = 'block';
			})
			// 鼠标经给隐藏
			box.addEventListener('mouseout',function(e){
				zz.style.display = 'none';
				odiv.style.display = 'none';
			})
			// 获取box的坐标
			box.addEventListener('mousemove',function(e){
				// 获得遮罩层所在的位置
				var xZuobiao = e.pageX - this.offsetLeft -(zz.offsetHeight/2);//zz.offsetHeight/2这个主要是把光标订到遮罩层的中间
				var yZuobiao = e.pageY - this.offsetTop - (zz.offsetWidth/2);
				// 获取遮罩层最大移动距离
				var maxX = box.offsetWidth-zz.offsetWidth;
				var maxY = box.offsetHeight-zz.offsetHeight;
				//判断遮罩层是否超过图片的边框
				if(xZuobiao <= 0 ){
					xZuobiao = 0;
				}else if(xZuobiao >= maxX){
					xZuobiao = maxX
				}
				if(yZuobiao <= 0 ){
					yZuobiao = 0;
				}else if(yZuobiao >= maxY){
					yZuobiao = maxY
				}
				zz.style.top = yZuobiao +'px';
				zz.style.left = xZuobiao +'px';
				// 大图片最大移动距离
				var odivMaxWidth = maximg.offsetWidth - box.offsetWidth;
				var odivMaxHeight = maximg.offsetHeight - box.offsetHeight;
				// 大图片的移动距离 = 遮罩层移动距离*大图片最大移动距离/遮罩层的最大移动距离
				var odivWidth = xZuobiao * odivMaxWidth / maxX;
				var odivHeight = yZuobiao * odivMaxHeight / maxY;
				//把获取到的大图片移动距离赋值给大图片
				maximg.style.top = -odivHeight + 'px';
				maximg.style.left = -odivWidth + 'px';
			})
		</script>