js基础学习（动画。放大镜）
onmousemove事件：
跟着鼠标移动而改变。
onmouseout事件：
鼠标离开；
onmouseenter事件：
鼠标离开；
放大镜效果案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{position: relative;}
        ul{
            width: 1000px;
            min-width: 600px;
            display: flex;
            justify-content: space-between;  
            align-items: center;        
            list-style: none;
            margin: 0 auto;
        }
        .big{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 100px;    
            top:100px;
        }

    </style>
    <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>
</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>
    <li><img src="./a/toplist_a06.jpg" alt=""></li>
</ul>
<img class="big" src="./a/toplist_a01.jpg" alt="">
</html>
 posted on 2021-11-05 16:42  陶小黑  阅读(52)  评论(0)    收藏  举报