效果图
HTML代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 #box { 16 width: 860px; 17 height: 430px; 18 border: 1px solid; 19 display: flex; 20 margin: 100px auto; 21 } 22 23 #box>div { 24 width: 430px; 25 height: 430px; 26 outline: 1px solid; 27 } 28 29 #box>div:first-child { 30 background-image: url("image/imgA_2.jpg"); 31 position: relative; 32 } 33 34 #box>div:first-child>div { 35 width: 231px; 36 height: 231px; 37 background-color: rgba(0, 0, 0, 0.2); 38 position: absolute; 39 top: 0; 40 left: 0; 41 display: none; 42 } 43 44 #box>div:first-child:hover div { 45 display: block; 46 } 47 48 #box>div:last-child { 49 background-image: url("image/imgA_3.jpg"); 50 51 } 52 53 #box1 { 54 margin: auto; 55 width: 800px; 56 height: 60px; 57 } 58 </style> 59 </head> 60 61 <body> 62 <div id="box"> 63 <div id="left"> 64 <div id="shadow"></div> 65 </div> 66 <div id="right"></div> 67 </div> 68 <div id="box1"> 69 <img src="image/imgA_1.jpg" alt=""> 70 <img src="image/imgB_1.jpg" alt=""> 71 <img src="image/imgC_1.jpg" alt=""> 72 </div> 73 74 </body> 75 76 </html>
JavaScript 代码示例
1 <script> 2 let index = 0; 3 let arr = ["image/imgA_2.jpg", "image/imgB_2.jpg", "image/imgC_2.jpg"]; 4 let arr1 = ["image/imgA_3.jpg", "image/imgB_3.jpg", "image/imgC_3.jpg"]; 5 let img = document.querySelectorAll("img"); 6 let left = document.querySelector("#left"); 7 let right = document.querySelector("#right"); 8 let shadow = document.querySelector("#shadow"); 9 10 for (let i = 0; i < img.length; i++) { 11 img[i].onmouseover = function () { 12 index = i; 13 left.style.background = `url("${arr[index]}")`; 14 right.style.background = `url("${arr1[index]}")`; 15 } 16 } 17 left.onmousemove = function (event) { 18 let e = event || window.event; 19 let pagex = e.pageX;//鼠标的位置 20 let pagey = e.pageY; 21 let shadowZiseX = shadow.offsetWidth;//遮罩div大小 22 let shadowZiseY = shadow.offsetHeight; 23 let shubiaoX = pagex - box.offsetLeft-shadowZiseX/2 ;//最后遮罩div的移动位置 24 let shubiaoY = pagey - box.offsetTop-shadowZiseY/2 ; 25 if (shubiaoX <=0) {//如果遮罩div的移动位置大于了X坐标的最小值，那就等于X坐标最小值 26 shubiaoX =0; 27 } 28 let maxRightX = left.offsetWidth - shadowZiseX;//left盒子空白位置等于：自身宽度-去小盒子宽度； 29 if (shubiaoX >= maxRightX) {//如果大于了空白盒子X的最大值那就等于最大值 30 shubiaoX = maxRightX 31 } 32 if (shubiaoY <=0) {//如果遮罩div的移动位置大于了Y坐标的最小值，那就等于Y坐标最小值 33 shubiaoY=0; 34 } 35 let maxRightY = left.offsetHeight-shadowZiseY; 36 if (shubiaoY >= maxRightY) {//如果大于了空白盒子Y的最大值那就等于最大值 37 shubiaoY = maxRightY 38 } 39 shadow.style.left = shubiaoX+ "px";//这里是分别给小盒子赋值X,Y坐标的值 40 shadow.style.top = shubiaoY+ "px"; 41 42 right.style["backgroundPosition"]=`-${shadow.offsetLeft/left.offsetWidth*800}px -${shadow.offsetTop/left.offsetHeight*800}px`; 43 //右边的背景图片的移动位置=阴影盒子/left盒子的宽高*自身背景图的大小； 44 console.log("woshi"+shadow.offsetTop); 45 } 46 </script>