跟随鼠标移动展示内容

 

 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>&copy;由选择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>

 

posted on 2016-10-10 15:28  Asina  阅读(243)  评论(0)  编辑  收藏  举报