鼠标动画-图片动画

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="">  

标签：function,动画,style,鼠标,src,big,imgs,display,图片
来源： https://www.cnblogs.com/zyp717201/p/15514651.html