1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>跟随鼠标移动展示内容</title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 font-family: 'microsoft yahei'; 11 } 12 #wrapper { 13 width: 300px; 14 height: 300px; 15 margin: 20px auto 0 auto; 16 position: relative; 17 } 18 #box { 19 width: 300px; 20 height: 300px; 21 background: pink; 22 } 23 span { 24 background: red; 25 color: #ffffff; 26 position: absolute; 27 left: 0; 28 top: 0; 29 display: inline-block; 30 width: 100px; 31 height: 21px; 32 } 33 p { 34 position: absolute; 35 left: 0; 36 right: 0; 37 bottom: 10px; 38 margin: auto; 39 text-align: center; 40 font-size: 12px; 41 } 42 </style> 43 </head> 44 <body> 45 46 <div id="wrapper"> 47 <div id="box"></div> 48 <span id="span">span</span> 49 </div> 50 51 <p>©由选择QQ空间皮肤和日本论坛网站联想出来的demo</p> 52 53 <script> 54 var wrapper = document.getElementById('wrapper'); 55 var box = document.getElementById('box'); 56 var spani = document.getElementById('span'); 57 var screenAvailWidth = screen.availWidth; 58 var boxWidth = box.offsetWidth; 59 var boxLeft = (screenAvailWidth / 2) - (boxWidth / 2); 60 var boxTop = wrapper.offsetTop; 61 var spaniLeft = 0; 62 var spaniTop = 0; 63 64 box.addEventListener('mousemove', function (event) { 65 //console.log(event); 66 spaniLeft = event.clientX - boxLeft; 67 spaniTop = event.clientY - boxTop; 68 69 spani.style.left = spaniLeft + 'px'; 70 spani.style.top = spaniTop + 'px'; 71 72 //console.log(spaniLeft); 73 74 if(spaniLeft > 10) { 75 spani.style.left = spaniLeft + 10 + 'px'; 76 }else if(spaniTop > 10) { 77 spani.style.top = spaniTop + 10 + 'px'; 78 } 79 80 // 横向超出 81 if(spani.offsetLeft > (box.offsetLeft + boxWidth)) { 82 //console.log('横向超出'); 83 spani.style.left = boxWidth - spani.offsetWidth - 1 + 'px'; 84 } 85 86 //console.log(spani.offsetTop); 87 88 // 纵向超出 89 if(spani.offsetTop > (box.offsetHeight - spani.offsetHeight)) { 90 //console.log('纵向超出'); 91 spani.style.top = box.offsetHeight - spani.offsetHeight - 1 + 'px'; 92 } 93 94 }, false); 95 96 </script> 97 98 </body> 99 </html>