鼠标动画-图片动画

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