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>
