代码收藏-经典的javascript自定义提示信息

chenglu

浏览: 142301 次
性别:
来自: 洛阳

最近访客更多访客>>

geekbird

LQJ2711

wiesheng

夏天的梁

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript Microsoft HTML

<html>
2

<head>
3

<title>tip</title>
4

</head>
6

<body>
7

<script>
8

if(!document.attachEvent)
9

{
10

document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
11

}
12

document.attachEvent("onmouseover",function(e)
13

{
14

var tip = "";
15

if(typeof(event)=="undefined"){
16

tip = e.target.getAttribute("tips")
17

}else{
18

e = event;
19

tip = e.srcElement.tips;
20

}
21

if(typeof(tip)!="undefined"&&tip.length>0)
22

{
23

var _tips = document.getElementById("myTip");
24

if(typeof(_tips)=="undefined"||_tips == null)
25

{
26

_tips = document.createElement("div");
27

_tips.id = "myTip";
28

_tips.style.position = "absolute";
29

_tips.style.width = "150px";
30

_tips.style.borderWidth = "1px";
31

_tips.style.borderStyle = "solid";
32

_tips.style.borderColor = "gray";
33

_tips.style.fontSize = "9pt";
34

_tips.style.backgroundColor = "#ffffff";
35

_tips.style.color = "#349045";
36

_tips.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)";
37

_tips.style.padding = "5px 8px 3px 8px";
38

document.body.appendChild(_tips);
39

_tips.style.display = "none";
40

}
41

_tips.style.display = "";
42

_tips.innerHTML = tip;
43

_tips.style.left = document.body.scrollLeft+e.clientX+10;
44

_tips.style.top = document.body.scrollTop+e.clientY+10;
45

}
46

}
47

);
48

document.attachEvent('onmouseout',function(e)
49

{
50

var _tips = document.getElementById("myTip");
51

if(_tips!=null)
52

{
53

_tips.style.display="none";
54

}
55

}
56

)
57

</script>
58

<a href="#" tips="自定义提示" >测试链接</a>
59

<a href="#" tips="<h1>你好世界</h1>">测试链接</a>
60

<a href="#" tips="这里填写tips">测试链接</a>
61

</body>
63

</html>

最终代码预览
http://dev.mobai.org/js/JS_Tags_Tips.html

分享到：

第一节、配置Java开发环境 | 32位电脑与64位电脑的检查方法

2009-07-30 21:44
浏览 881
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论