鼠标动画/选项卡

鼠标动画案列1

让span标签里面的文字随着鼠标的移动而移动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         body{
 9             position: relative;
10         }
11         div{
12             width: 200px;
13             height: 200px;
14             background-color: aquamarine;
15         }
16         span{
17             position: absolute;
18             top: 10px;
19             left: 10px;
20         }
21     </style>
22     <script>
23         window.onload=function(){
24             var div=document.querySelector("div");
25             var span=document.querySelector("span");
26             div.onmousemove=function(e){ //e事件（event）对象
27                 //获取鼠标位置
28                 // console.log(e.x,e.y);
29                 span.style.top=e.y+"px";  //上下是y轴，左右是x轴 e.y+"px"=>鼠标y轴的位置
30                 span.style.left=e.x+"px"; //e.y+"px"=>鼠标x轴的位置
31  　　　　} 
32 　　　　 }
33 　　　</script> 
34 </head> 
35 <body> 
36 　　<div></div> 
37 　　<span>这是一段文字</span> 
38 </body> 
39 </html>

鼠标动画案列2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        ul{
            width: 1000px;
            min-width: 600px;
　　　　　　　//flex布局
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
            align-items: center;
            list-style: none;
        }
        .big{
            width: 300px;
            height: 300px;
            position: absolute;
            top: 100px;
            left: 100px;
            display: none;
        }
    </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"; //上下是y轴，左右是x轴 e.y+10+"px"让鼠标离big有距离
                    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>
</head>
<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="">
</body>
</html>

 鼠标事件 onmouseenter 和 onmouseover 的区别

当为onmouseenter时不会冒泡，及不会重复触发父级事件，在进入父级时也不会触发子级事件。
当为onmouseover时会冒泡，只要进入到标签内就会触发标签内所有子集标签的事件，且在移动过程中父级标签会重复触发，出现连续触发的问题，可以用原生js方法阻止事件冒泡

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: #333;
            
        }
        ul li{
            display: inline-block;
            width: 60px;
            height: 20px;
        }
        ul li a{
            display: block;
            text-align: center;
            background-color: #ccc;
        }
        .active{
            background-color: aquamarine;
        }
        .content{
            width: 186px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
    <script>
        window.onload=function(){
            var as=document.querySelectorAll("li a");
            for(var i=0;i<as.length;i++){
                as[i].onclick=function(){
                    for(var j=0;j<as.length;j++){
                        as[j].className=""; //把li a里所有的className清除掉
                    }
                    this.className="active"; //让当前的li列表中的a标签加上active                   
                }
            }
        }
    </script>
</head>
<body>
    <ul>
        <li><a href="#" class="active" data-url="http://a">列表1</a></li>
        <li><a href="#" data-url="http://b">列表2</a></li>
        <li><a href="#" data-url="http://c">列表3</a></li>
    </ul>
    <div class="content">
        
    </div>
</body>
</html>

 

posted @ 2021-11-06 15:40  _雪  阅读(61)  评论(0)    收藏  举报