js 鼠标动画2

样式：

js：

获取图片id名

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

               }

            }

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>

        <li><img src="./a/toplist_a06.jpg" alt=""></li>

    </ul>

大图片

 <img class="big" src="./a/toplist_a01.jpg" alt="">

小图片