鼠标的移动效果

 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>

 

上一篇:k8s 集群部署 flannel 报错 Couldn't fetch network config


下一篇:2021-11-02