body
position: relative; ul{ width: 100px; min-width: 600px; margin: 0 auto; list-style: none; display: flex; justify-content: space-around; align-items: center; } big 加 position: absolute; 设置宽高都放大 JS代码 <script> window.onload=function(){ var imgs=document.querySelectorAll("li img"); var big=document.querySelector(".big"); for (let i = 0; i < imgs.length; i++) { imgs[i].onmousemove = function(e){ big.style.top=e.y+10+"px"; big.style.left=e.x+10+"px"; big.src=this.src; } imgs[i].onmouseout=function(){ big.style.display="none"; } imgs[i].onmouseenter=function(){ big.style.display="block"; } } } </script> HTML内容 <ul> <li><img src="./a/toplist_a01.jpg" alt=""></li> <li><img src="./a/toplist_a02.jpg" alt=""></li> <li><img src="./a/toplist_a03.jpg" alt=""></li> <li><img src="./a/toplist_a04.jpg" alt=""></li> <li><img src="./a/toplist_a05.jpg" alt=""></li> </ul> <img src="./a/toplist_a01.jpg" class="big" alt="" srcset="">鼠标动画-图片动画
2023-11-10 14:12:16