样式编程之——简单工具提示-优快云博客

1 <html>
2 <head>
3 <title>Tooltip Page</title>
4 <style type="text/css">
5     body {
6         margin:20pt;
7         font:11pt "lucida grande", verdana, sans-serif;
8     }
9     #tooltip {
10         width:500px;
11         background-color:#fffacd;
12         padding:10px 10px 10px 10px;
13         position:absolute;
14         border:5px solid #313131;
15     }
16 </style>
17 <script type="text/javascript">
18     function init() {
19         // 添加mouseover事件处理函数
20         addEventListener($("link"),"mouseover",showTip);
21         // 添加mouseout事件处理函数
22         addEventListener($("link"),"mouseout",hideTip);
23     }
24     function showTip(evt) {
25         // 获取鼠标位置
26         var event = window.event ? window.event : evt;
27         var left = event.clientX + 10;
28         var top = event.clientY + 10;
29         // 设置工具提示<div>元素的样式，使其位于鼠标右下(10px,10px)处
30         var style = {
31             "left":left + "px",
32             "top":top + "px",
33             "display":""
34         };
35         setStyle($("tooltip"),style);
36     }
37     function hideTip() {
38         setStyle("tooltip",{"display":"none"});
39     }
40     // 设置ele元素的样式属性
41     function setStyle(ele,style) {
42         ele = $(ele);
43         for(p in style) {
44             ele.style[p] = style[p];
45         }
46     }
47     // 添加事件处理函数
48     function addEventListener(ele,type,func) {
49         if(ele.addEventListener) {
50             ele.addEventListener(type,func,false);
51         } else {
52             ele.attachEvent("on" + type,func);
53         }
54     }
55     function $(element) {
56         return (typeof element == "string") ?
57             document.getElementById(element) : element;
58     }
59 </script>
60 </head>
61 <body onload="init()">
62     <a href="http://www.google.com" id="link">Tooltip Test</a></br>
63     这是一个简单工具提示功能的例子。</br>
64     计算机家电过程是怎样的呢？
65     <div id="tooltip" style="display:none;">
66         <p>
67             计算机加电过程：按下开机按钮后，将发送电信号给BIOS；BIOS获得电信号后，将启动自动检查程序，检查周边设备是否通电完毕；
68             检查完毕后自检程序把控制权交还BIOS，BIOS将读取引导驱动器中的启动程序。
69         </p>
70     </div>
71 </body>
72 </html>

转载于:https://www.cnblogs.com/mikelin/archive/2010/02/19/1669380.html