鼠标滑入切换图片
![](https://img2023.cnblogs.com/blog/1090513/202304/1090513-20230425101803155-187334883.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0 } .container .carousel { margin-top: 100px; margin-left: 500px; display: flex; position: relative; width: 500px; height: 300px; } .container .carousel .item img { height: 300px; width: 500px; } .hide { /* display: none; */ opacity: 0%; } .container .item:nth-child(1) { position: absolute; left: -500px; top: 0px; } .container .item:nth-child(2) { position: absolute; left: 0; top: -300px; } .container .item:nth-child(4) { position: absolute; left: 500px; top: 0px; } .container .item:nth-child(5) { position: absolute; left: 0px; top: 300px; } @keyframes panoramic { 50% { opacity: 90%; } 100% { opacity: 100%; } } .left .item:nth-child(1) { z-index: 2; transform: translate(500px, 0px); transition: 2s; animation: panoramic 1s ease; animation-fill-mode: forwards; } .up .item:nth-child(2) { display: block; z-index: 2; transform: translate(0px, 300px); transition: 2s; animation: panoramic 1s ease; animation-fill-mode: forwards; } .right .item:nth-child(4) { display: block; z-index: 2; transform: translate(-500px, 0px); transition: 2s; animation: panoramic 1s ease; animation-fill-mode: forwards; } .down .item:nth-child(5) { display: block; z-index: 2; transform: translate(0px, -300px); transition: 2s; animation: panoramic 1s ease; animation-fill-mode: forwards; } </style> </head> <body> <div class="container"> <div class="carousel"> <div class="item hide"><img src="../vue/image/1087.jpg" alt=""></div> <div class="item hide"><img src="../vue/image/3046.jpg_wh300.jpg" alt=""></div> <div class="item" id="center"><img src="../vue/image/3247.jpg_wh300.jpg" alt=""></div> <div class="item hide"><img src="../vue/image/1091.jpg" alt=""></div> <div class="item hide"><img src="../vue/image/5041.jpg_wh300.jpg" alt=""></div> </div> </div> <script type="text/javascript"> var _center = document.getElementById('center'); let carousel = document.querySelector('.carousel'); // 盒子的宽度 // style.width 获取的是元素自身的宽度,不包括内边距,边框和外边距 // clientWidth 获取的是元素自身的宽度+内边距, 但不包括边框和外边距 var _width = _center.clientWidth; var _height = _center.clientHeight; // 元素的信息 // console.log(_center.getBoundingClientRect()); let rect = _center.getBoundingClientRect(); // 夹角 let theta = Math.atan(rect.height / rect.width); console.log(theta); _center.onmouseover = function (e) { // console.log(_width); // console.log(_height); // 正切,数学术语,在Rt△ABC(直角三角形)中,∠C=90°,AB是∠C的对边c,BC是∠A的对边a,AC是∠B的对边b,正切函数就是tanB=b/a,即tanB=AC/BC。 //获取鼠标位置 // var x = e.clientX; // var y = e.clientY; var x = e.offsetX; var y = e.offsetY; console.log('x=' + x); console.log('y=' + y); x = x - _width / 2; y = _height / 2 - y; // 反正切的夹角 let d = Math.atan2(y, x); let dire; if (d < theta && d >= -theta) { console.log('我从右边进入了'); dire = 'right'; } else if (d >= theta && d < Math.PI - theta) { console.log('我从上面进入了'); dire = 'up'; } else if (d < -theta && d >= -(Math.PI - theta)) { console.log('我从下面进入了'); dire = 'down'; } else { console.log('我从左边进入了'); dire = 'left'; } carousel.classList.add(dire); } _center.onmouseout = function (event) { console.log('我移除了'); }; carousel.addEventListener('mouseleave', () => { carousel.className = 'carousel'; }) </script> </body> </html>