鼠标的移动效果 

 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: tomato;
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){
27                 //获取鼠标位置
28                 //event 浏览器对象
29                 //console.log(e.x,e.y);
30                 span.style.top=e.y+"px";//鼠标移动效果
31                 span.style.left=e.x+"px";//鼠标移动效果
32             }
33         }
34     </script>
35 </head>
36 <body>
37     <div></div>
38     <span>这是一段文字</span>
39 </body>
40 </html>

 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         *{
 9             margin: 0;
10             padding: 0;
11         }
12 
13         body{
14             position: relative;
15         }
16         ul{
17             width: 1000px;
18             min-width: 600px;
19             margin: 0 auto;
20             /* min-width 最小宽度 */
21             list-style: none;
22             display: flex;
23             justify-content: space-between;
24             align-items: center;
25         }
26         .big{
27             width: 300px;
28             height: 300px;
29             position: absolute;
30             left: 100px;
31             top: 100px;
32         }
33     </style>
34     <script>
35         window.onload =function(){
36     var imgs = document.querySelectorAll("li img");
37     var big= document.querySelector(".big");
38     for (let i = 0; i < imgs.length; i++) {
39      imgs[i].onmousemove =function(e){
40         big.style.top=e.y + 10 + "px";
41         big.style.left=e.x + 10 + "px";
42         big.src=this.src;
43      }
44      imgs[i].onmouseout= function(){
45         big.style.display="none";
46     }
47     imgs[i].onmouseenter= function(){
48         big.style.display="block";
49     }
50 }
51         }
52     </script>
53 </head>
54 <body>
55     <ul>
56         <li><img src="./a/toplist_a01.jpg" alt=""></li>
57         <li><img src="./a/toplist_a02.jpg" alt=""></li>
58         <li><img src="./a/toplist_a03.jpg" alt=""></li>
59         <li><img src="./a/toplist_a04.jpg" alt=""></li>
60         <li><img src="./a/toplist_a05.jpg" alt=""></li>
61         <li><img src="./a/toplist_a06.jpg" alt=""></li>
62     </ul>
63     <img class="big" src="./a/toplist_a01.jpg" alt="">
64 </body>
65 </html>

 

posted @ 2021-11-05 17:23  小小不小阿  阅读(91)  评论(0)    收藏  举报