Effect:

 

Implementation ideas

1. After the mouse moves into the list of commodities below, the corresponding commodities will be displayed at the top
2. By default, the yellow box and the large box on the right are hidden
3. After the mouse enters the above commodity list, the small yellow box is displayed, and the large box on the right is displayed
4. The display of the goods on the right side is twice that of the goods on the left side, and it is the opposite of the moving distance of the yellow box on the left side

layout

<!-- The largest box on the outside -->
	<div class="bigBox">
		<!-- Small box on the left -->
		<div class="leftBox" id="leftBox1">
			<img src="./images/xie.jpg" alt="" id="xiaoxie">
			<div class="mark" id="mark1"></div>
		</div>
		<!-- Product icons below -->
		<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>
		<!-- Large box on the right enlarge picture -->
		<div class="rightBox" id="rightBox1">
			<img src="./images/daxie.jpg" alt="" id="daxie">
		</div>
	</div>

Part css

<style>
		.bigBox{
			width: 1100px;
			margin:0 auto;
		}
		/*Set left box size*/
		.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;
			 /* Set up filter */
    		filter:alpha(opacity=50);
    		/*Default hiding*/
			display: none;
			cursor: move;
		}
		.rightBox{
			position: relative;
			width: 500px;
			height: 600px;
			float: left;
			border:1px solid #000;
			overflow: hidden;
			/*Set the box on the right to hide by default*/
			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 implementation part

<script>
var item = document.getElementsByClassName("item");
var img = document.getElementsByClassName("item-img");
//Create an array of product icons below,
var arr = ["./images/xie.jpg","./images/xie1.jpg","./images/xie2.jpg","./images/xie3.jpg","./images/xie4.jpg","./images/xie5.jpg"];
//Array of large pictures on the right
var bigArrImg = ["./images/daxie.jpg","./images/daxie1.jpg"]
//Set the move in display and move out hidden events of the left box
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])
	}
}
// Mark 1.onmousemove = function (E) {, it was written in this way at first, but it will appear that the small yellow box deviates
//Set the mouse movement event for the left box, and set the movement for the small yellow box
leftBox1.onmousemove = function(e){
	var e = e||event;
	//Set the maximum moving distance of mouse x and y
	var x = e.clientX-leftBox1.offsetLeft-mark1.offsetWidth/2
	var y = e.clientY-leftBox1.offsetTop-mark1.offsetHeight/2
	// Set the maximum moving distance of small yellow box
	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";
	// The actual moving distance of the large box on the right side is twice that of the left side, and it is the opposite
	daxie.style.left = -x*2+"px"
	daxie.style.top = -y*2+"px"
}

summary

Finally, it is found that the yellow box will automatically appear in the upper left corner when the mouse starts to move in, and will not appear at the beginning of the mouse

 

Reason: the mouse movement event should be bound to the large box on the left, not the small yellow box, to solve this problem