鼠标动画

获取鼠标位置

var div=document.querySelector("div");
div.onmousemove=function(e){
    console.log(e);
}

 

 

 

点击小图片 出现大图片

 

 

js

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){ //onmouseenter onmouseover
            big.style.display="block";
            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";
        }
    }
}

html

<ul>
    <li><img src="./img/toplist_a01.jpg" alt=""></li>
    <li><img src="./img/toplist_a02.jpg" alt=""></li>
    <li><img src="./img/toplist_a03.jpg" alt=""></li>
    <li><img src="img/toplist_a04.jpg" alt=""></li>
    <li><img src="img/toplist_a05.jpg" alt=""></li>
</ul>
<img class="big" src="img/toplist_a01.jpg"  alt="">