js实现仿京东商品放大镜和选项卡效果

本文链接：https://blog.csdn.net/cp3___/article/details/89513034

效果：

实现思路

鼠标移入下面商品列表之后，在最上面显示对应的商品
默认情况下，黄色盒子和右侧大盒子是隐藏的
鼠标进入上面商品列表后，小黄盒子显示，右侧大盒子的商品显示
右侧商品的显示，是左侧商品的两倍并且是跟左侧黄色盒子移动距离相反

布局

<!-- 外层最大的盒子 -->
	<div class="bigBox">
		<!-- 左侧的小盒子 -->
		<div class="leftBox" id="leftBox1">
			<img src="./images/xie.jpg" alt="" id="xiaoxie">
			<div class="mark" id="mark1"></div>
		</div>
		<!-- 下面的商品小图标 -->
		<ul class="items">
			<li class="item"><img src="./images/xiaoxie.jpg" alt=""  class="item-img"></li>
			<li class="item"><img src="./images/xiaoxie1.jpg" alt="" class="item-img"></li>
			<li class="item"><img src="./images/xiaoxie2.jpg" alt="" class="item-img"></li>
			<li class="item"><img src="./images/xiaoxie3.jpg" alt="" class="item-img"></li>
			<li class="item"><img src="./images/xiaoxie4.jpg" alt="" class="item-img"></li>
		</ul>
		<!-- 右侧大盒子 放大图片 -->
		<div class="rightBox" id="rightBox1">
			<img src="./images/daxie.jpg" alt="" id="daxie">
		</div>
	</div>

css部分

<style>
		.bigBox{
			width: 1100px;
			margin:0 auto;
		}
		/*设置左侧盒子大小*/
		.leftBox{
			border:1px solid #000;
			float: left;
			position: relative;
			width: 350px;
			height: 350px;
		}
		.leftBox img{
			position: absolute;
			width: 300px;
		}
		.mark{
			width: 250px;
			height: 250px;
			position: absolute;
			z-index:333;
			background: yellow;
			opacity: 0.5;
			 /* 设置滤镜 */
    		filter:alpha(opacity=50);
    		/*默认隐藏*/
			display: none;
			cursor: move;
		}
		.rightBox{
			position: relative;
			width: 500px;
			height: 600px;
			float: left;
			border:1px solid #000;
			overflow: hidden;
			/*设置右侧盒子默认隐藏*/
			display: none;
			margin-left: 10px;
		}
		.rightBox #daxie{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.items{
			position: absolute;
			width: 360px;
			height: 80px;
			top:350px;
			left: 80px;
		}
		.items .item img{
			width: 60px;
			height: 60px;
		}
		.items .item{
			float: left;
			list-style: none;
			margin-right: 4px;
		}
	</style>

JS实现部分

<script>
var item = document.getElementsByClassName("item");
var img = document.getElementsByClassName("item-img");
//创建一个下面商品小图标的数组，
var arr = ["./images/xie.jpg","./images/xie1.jpg","./images/xie2.jpg","./images/xie3.jpg","./images/xie4.jpg","./images/xie5.jpg"];
//右侧大图片的数组
var bigArrImg = ["./images/daxie.jpg","./images/daxie1.jpg"]
//设置左侧盒子的移入显示，移出隐藏事件
leftBox1.onmouseover = function(){
	mark1.style.display = "block"
	rightBox1.style.display = "block";
}
leftBox1.onmouseout = function(){
	mark1.style.display = "none"
	rightBox1.style.display = "none"
}
for(var i = 0; i < item.length;i++){
	item[i].index = i;
	item[i].onmouseover = function(){
		for(var j = 0; j< item.length;j++){
			item[j].style.border = "none"
		}
		this.style.border = "2px solid red";
		xiaoxie.setAttribute("src",arr[this.index])
		daxie.setAttribute("src",arr[this.index])
	}
}
// mark1.onmousemove = function(e){	，开始是这样写的，但是会出现，小黄盒子偏离现象
//为左侧盒子设置鼠标移动事件，给小黄盒子设置移动
leftBox1.onmousemove = function(e){
	var e = e||event;
	//设置鼠标x和y的最大移动距离
	var x = e.clientX-leftBox1.offsetLeft-mark1.offsetWidth/2
	var y = e.clientY-leftBox1.offsetTop-mark1.offsetHeight/2
	// 设置小黄盒子的最大移动距离
	var maxW = leftBox1.offsetWidth-mark1.offsetWidth;
	var maxH = leftBox1.offsetHeight-mark1.offsetHeight;
	if(x<0){
		x=0
	}
	if(y<0){
		y=0
	}
	if(x>maxW){
		x=maxW
	}
	if(y>maxH){
		y=maxH
	}
	mark1.style.left = x+"px";
	mark1.style.top = y+"px";
	// 右侧大盒子的实际移动距离是左侧的两倍，并且是相反的
	daxie.style.left = -x*2+"px"
	daxie.style.top = -y*2+"px"
}