您的位置：首页 > Web前端 > CSS

样式编程之——简单工具提示

2010-02-19 13:56 381 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航