鼠标动画2
样式内容： 
在父元素和子元素上添加定位
<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        ul{
            width: 1000px;
            min-width: 600px;
            margin: 0 auto;
            list-style: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
           
        }
        .big{
            width: 300px;
            height: 300px;
            position: absolute;
            /* left: 100px;
            top: 100px; */
            display: none;
        }
    </style>
    <script>
        window.onload=function(){
           var imgs=document.querySelectorAll("li img");
           var big=document.querySelector(".big");
           for (var 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内容：
<body>

    <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 class="big" src="a/toplist_a01.jpg" alt="">
</body>
显示图片：

 

posted on 2021-11-07 20:48  于凡芮  阅读(32)  评论(0)    收藏  举报