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>