posts - 89, comments - 241, trackbacks - 0, articles - 1
   :: 首页 ::  :: 联系 :: 聚合  :: 管理

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

Posted on 2009-07-30 21:44 saobaolu 阅读(366) 评论(0)  编辑  收藏 所属分类: 前端
 1<html>
 2<head>
 3<title>tip</title>
 4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5</head>
 6<body>
 7<script>
 8if(!document.attachEvent)
 9{
10 document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
11}
12document.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);
48document.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
62</body>
63</html>
最终代码预览
http://dev.mobai.org/js/JS_Tags_Tips.html

没有所谓的命运，只有不同的选择！