ちょうきょう666

导航

javascript3跟随鼠标的提示框 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             a{display: block;font-size: 40px;margin: 100px;width: 130px;}
 8             #msg{width: 600px;height: 150px;background-color: grey;color: white;display: none;position: absolute;}
 9             
10         </style>
11         <script>
12             var arr=["1212","22222","33333","4444"];
13             window.onload=function(){
14                 var aAs=document.getElementsByTagName("a");
15                 var oMsg=document.getElementById("msg");
16                 
17                 for(var i=0;i<aAs.length;i++){
18                     aAs[i].index=i;
19                         
20                     aAs[i].onmouseover=function(){
21                         oMsg.innerHTML=arr[this.index];
22                         oMsg.style.display="block";
23                     }
24                         
25                     aAs[i].onmouseout=function(){
26                         oMsg.style.display='none';
27                     }
28                     aAs[i].onmousemove=function(ev){//ev为当前事件
29                         var e=ev||window.event;
30                         oMsg.style.left=e.clientX+5+"px";
31                         oMsg.style.top=e.clientY+5+"px";
32                     }
33                 }
34             }
35         </script>
36     </head>
37     <body>
38         <a href="#">唐太宗</a>
39         <a href="#">唐高宗</a>
40         <a href="#">武则天</a>
41         <a href="#">唐玄宗</a>
42         <div id="msg"></div>
43     </body>
44 </html>

 

posted on 2020-12-18 14:17  ちょうきょう666  阅读(107)  评论(0)    收藏  举报