关于作者

封装一个title提示效果（兼容Firefox）

上一篇 / 下一篇 2007-04-25 19:48:42 / 个人分类：JScript编程

查看( 2504 ) / 评论( 20 )

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>LandscapingTitle demo!</title>

<script language="JavaScript">

window.onload = function(){

        var by_title_tmp = new String();

        var tags = document.getElementsByTagName("a");

        for(var i = 0 ; i < tags.length ; i ++){

                tags[i].onmouseover = function(event){

                        event = event ? event : window.event;

                        var by_title_div                   = document.createElement("div");

                        by_title_div.id                    = "by_title_div";

                        by_title_div.style.position        = "absolute";

                        by_title_div.style.border          = "1px solid #cccccc";

                        by_title_div.style.padding         = "5px";

                        by_title_div.style.backgroundColor = "#f3f3f3";

                        by_title_div.style.fontSize        = "12px";

                        by_title_div.innerHTML             = "<img src='http://bbs.51js.com/images/default/red_folder.gif' align='absmiddle' /> " + this.title;

                        by_title_tmp                       = this.title;

                        this.title                         = "";

                        document.getElementsByTagName("body")[0].appendChild(by_title_div);

                        (document.documentElement.clientHeight - event.clientY - 20 > document.getElementById("by_title_div").clientHeight) ? by_title_div.style.top = (event.clientY + 20 + "px") : by_title_div.style.bottom = "40px";

                        (document.body.clientWidth - event.clientX > document.getElementById("by_title_div").clientWidth) ? by_title_div.style.left = (event.clientX + "px") : by_title_div.style.right = "0px";

                }

                tags[i].onmouseout = function(){

                        document.getElementsByTagName("body")[0].removeChild(document.getElementById("by_title_div"));

                        this.title = by_title_tmp;

                }

        }

}

</script>

</head>

<body>

<div style="width:100%;text-align:right"><a href="#" title="提示一提示一提示一">为了我们的身心健康为了我们的身心健康为了我们的身心健康</a></div><br /><br /><br />

<a href="#" title="提示一">我们应该</a><br /><br />

<a href="#" title="提示三">多抽烟</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<a href="#" title="提示四">多喝酒</a><br />

</body>

</html>

[ 本帖最后由 biyuan 于 2007-4-26 09:13 编辑 ]

全部脚印 不留脚印留下脚印:

78954

论坛模式推荐收藏分享给好友推荐到圈子管理

TAG:

枫岩发布于2007-04-25 21:17:01: 不错。
如果提示Title超出body区后能自动回位的话，则更理想了。
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>LandscapingTitle demo!</title> <script language="JavaScript"> window.onload = function(){ var by_title_tmp = new String(); var tags = document.getElementsByTagName("a"); for(var i = 0 ; i < tags.length ; i ++){ tags[i].onmouseover = function(event){ event = event ? event : window.event; var by_title_div = document.createElement("div"); by_title_div.id = "by_title_div"; by_title_div.style.position = "absolute"; by_title_div.style.border = "1px solid #cccccc"; by_title_div.style.padding = "5px"; by_title_div.style.backgroundColor = "#f3f3f3"; by_title_div.style.top = (event.clientY + 20) + "px"; by_title_div.style.left = event.clientX + "px"; by_title_div.style.fontSize = "12px"; by_title_div.innerHTML = "<img src='http://bbs.51js.com/images/default/red_folder.gif' align='absmiddle' /> " + this.title; by_title_tmp = this.title; this.title = ""; document.getElementsByTagName("body")[0].appendChild(by_title_div); } tags[i].onmouseout = function(){ document.getElementsByTagName("body")[0].removeChild(document.getElementById("by_title_div")); this.title = by_title_tmp; } } } </script> </head> <body> <a href="#" title="提示一">为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康为了我们的身心健康</a> <a href="#" title="提示二">我们应该</a> <a href="#" title="提示三">多抽烟</a> <a href="#" title="提示四">多喝酒</a> </body> </html>

syt0529 发布于2007-04-25 22:03:44: 在ie6下程序的document.getElementsByTagName("body")[0].removeChild(document.getElementById("by_title_div")); 有点问题，提示说参数无效，不清楚。ff下没试过。至于2楼的问题就好解决了
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>LandscapingTitle demo!</title> <script language="JavaScript"> window.onload = function(){ var by_title_tmp = new String(); var tags = document.getElementsByTagName("a"); for(var i = 0 ; i < tags.length ; i ++){ tags[i].onmouseover = function(event){ event = event ? event : window.event; var by_title_div = document.createElement("div"); by_title_div.id = "by_title_div"; by_title_div.style.position = "absolute"; by_title_div.style.border = "1px solid #cccccc"; by_title_div.style.width = "100"; by_title_div.style.padding = "5px"; by_title_div.style.backgroundColor = "#f3f3f3"; by_title_div.style.top = (event.clientY + 20) + "px"; by_title_div.style.left =(document.body.clientWidth-event.clientX>100)? event.clientX + "px":event.clientX-100+"px"; by_title_div.style.fontSize = "12px"; by_title_div.innerHTML = "<img src='http://bbs.51js.com/images/default/red_folder.gif' align='absmiddle' /> " + this.title; by_title_tmp = this.title; this.title = ""; document.getElementsByTagName("body")[0].appendChild(by_title_div); } tags[i].onmouseout = function(){ document.getElementsByTagName("body")[0].removeChild(document.getElementById("by_title_div")); this.title = by_title_tmp; } } } </script> </head> <body> <a href="#" title="提示一提示一提示一提示一提示一提示一">为了我们的身心健康时为了我们的身心健康时为了我们的身心健康时为了我们的身心健康时为了我们的身心健康时为了我们的身心健康时为了我们的身心健康时为了我们的身心健康时为了我们的身心健康时为了我们的身心健康时</a> <a href="#" title="提示二">我们应该</a> <a href="#" title="提示三">多抽烟</a> <a href="#" title="提示四">多喝酒</a> </body> </html>

biyuan 发布于2007-04-26 00:29:15: 2楼的问题已经修正
QUOTE:
原帖由 syt0529 于 2007-4-25 22:03 发表
在ie6下程序的document.getElementsByTagName("body")[0].removeChild(document.getElementById("by_title_div")); 有点问题，提示说参数无效，不清楚。ff下没试过。
我是在IE6下调试的，没有问题呀。
IE6下可以直接：document.body.removeChild(by_title_div);
不过FF不支持

myhome 发布于2007-04-26 01:45:11: 还是有问题，当页面过长时，提示就跑不见了！错位严重！
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>LandscapingTitle demo!</title> <script language="JavaScript"> window.onload = function(){ var by_title_tmp = new String(); var tags = document.getElementsByTagName("a"); for(var i = 0 ; i < tags.length ; i ++){ tags[i].onmouseover = function(event){ event = event ? event : window.event; var by_title_div = document.createElement("div"); by_title_div.id = "by_title_div"; by_title_div.style.position = "absolute"; by_title_div.style.border = "1px solid #cccccc"; by_title_div.style.padding = "5px"; by_title_div.style.backgroundColor = "#f3f3f3"; by_title_div.style.fontSize = "12px"; by_title_div.innerHTML = "<img src='http://bbs.51js.com/images/default/red_folder.gif' align='absmiddle' /> " + this.title; by_title_tmp = this.title; this.title = ""; document.getElementsByTagName("body")[0].appendChild(by_title_div); by_title_div.style.top = (event.clientY + 20) + "px"; (document.body.clientWidth - event.clientX > document.getElementById("by_title_div").clientWidth) ? by_title_div.style.left = (event.clientX + "px") : by_title_div.style.right = "0px"; } tags[i].onmouseout = function(){ document.getElementsByTagName("body")[0].removeChild(document.getElementById("by_title_div")); this.title = by_title_tmp; } } } </script> </head> <body> <div style="width:100%;text-align:right"><a href="#" title="提示一">为了我们的身心健康</a></div> <a href="#" title="提示二">我们应该</a> <a href="#" title="提示三">多抽烟</a> <a href="#" title="提示四">多喝酒</a> </body> </html>

syt0529 发布于2007-04-26 08:39:13: 加上判断div位置的语句就行了

[ 本帖最后由 syt0529 于 2007-4-26 08:45 编辑 ]

dron 发布于2007-04-26 08:58:22: 效果很不错，

不过这里得批评老碧，你不仅沾污了 window.onload 的方法，还霸占了所有 a标签的 onmouseover　和 onmouseout　事件。。　假如我某个 a　刚好定义了自己的 onmouseover事件函数，则会被你的程序复盖。。

biyuan 发布于2007-04-26 09:14:34: QUOTE:
原帖由 dron 于 2007-4-26 08:58 发表
效果很不错，

不过这里得批评老碧，你不仅沾污了 window.onload 的方法，还霸占了所有 a标签的 onmouseover　和 onmouseout　事件。。　假如我某个 a　刚好定义了自己的 onmouseover事件函数，则会被你的程序 ...

vtsuper发布于2007-04-26 11:07:49: 小弟是新手..請問為何是沾污了 window.onload 的方法呢?

myhome 发布于2007-04-26 14:57:46

QUOTE:

原帖由 biyuan 于 2007-4-26 00:29 发表
2楼的问题已经修正

我是在IE6下调试的，没有问题呀。
IE6下可以直接：document.body.removeChild(by_title_div);
不过FF不支持

我的2000系统IE6 这一行也报错：document.getElementsByTagName("body")[0].removeChild(document.getElementById("by_title_div"));
说：参数无效，字符4
使用document.body.removeChild(by_title_div);也一样！

{D4D1E3C5-7D48-4407-A7F6-620C02EC6C70}.jpg

另外还是有错位现象：

{379FF57A-2D48-4549-A733-4467CAF1B010}.jpg

[ 本帖最后由 myhome 于 2007-4-26 15:04 编辑 ]

biyuan 发布于2007-04-26 15:19:31: 试试这个：
CODE:
<html> <head> <title>titleEffect</title> </head> <style type="text/css"> body, td { font-size: 12px; line-height: 20px; } </style> <body> 我们要： <a href="#" title="个子高高的">个儿高</a> <a href="#" title="成绩棒棒的">学习高</a> <a href="#" title="身体壮壮的">身体棒</a> <script type="text/javascript"> function titleEffect(e) { e = e || event; var element = e.srcElement || e.target; var body = document.body; var tip = document.getElementById("tip-div"); if (!tip) { tip = document.createElement("div"); tip.id = "tip-div"; with (tip.style) { display = "none"; color = "#000"; backgroundColor = "#f3f3f3"; border = "1px solid #cccccc"; fontSize = "12px"; padding = "5px"; lineHeight = "16px"; position = "absolute"; left = "0"; top = "0"; zIndex = 2000; // 一个足够大的数，保证层会处于最上层 } body.appendChild(tip); } var title = element.getAttribute("title") || element.getAttribute("_title"); if (!title) return (tip.style.display=="block") && (tip.style.display="none"); if (element.getAttribute("title")) { element.setAttribute("title", ""); element.setAttribute("_title", title); } tip.style.display = "block"; if (tip.innerHTML == title) return ; else tip.innerHTML = "<img src='http://bbs.51js.com/images/default/red_folder.gif' align='absmiddle' /> " + title; var left = body.scrollLeft + e.clientX + 10; left = (left>body.clientWidth-tip.clientWidth) ? (left-tip.clientWidth) : left; var top = body.scrollTop + e.clientY + 10; top = (top>body.clientHeight-tip.clientHeight) ? (top-tip.clientHeight) : top; tip.style.left = left + "px"; tip.style.top = top + "px"; } document.onmousemove = titleEffect; </script> </body> </html>[ 本帖最后由 biyuan 于 2007-4-26 16:54 编辑 ]

dron 发布于2007-04-26 15:25:18: 哈哈，　弱弱地说了声：“超级压缩混淆”

'
CODE:
<html> <head> <title>titleEffect</title> </head> <style type="text/css"> body, td { font-size: 12px; line-height: 20px; } </style> <body> 我们要： <a href="#" title="个子高高的">个儿高</a> <a href="#" title="成绩棒棒的">学习高</a> <a href="#" title="身体壮壮的">身体棒</a> <script type="text/javascript"> function titleEffect(e){ var _5=document,_2=(_=_5.body,e=e||event).srcElement||e.target,_3=_2.getAttribute("title")||_2.getAttribute("_t"),_7,_8 if((((_4=_5.getElementById("tip-div"))||_.appendChild(((function(){with(((_4=_5.createElement("div")).id="tip-div",_4.style)){color="#000",backgroundColor="#ffffe1",border="1px solid #000",display="none",fontSize=lineHeight="12px",position="absolute",left=top="0",padding="2px",zIndex=2000}})(),_4))),_6=_4.style,!_3))return(_6.display=="block")&&(_6.display="none") if((_2.getAttribute("title")&&_2.setAttribute("title","",_2.setAttribute("_t",_3)),_6.display="block",_4).innerHTML==_3)return;else(_4.innerHTML=_3,((_6.left=(((_7=_.scrollLeft+e.clientX+10)>_.clientWidth-_4.clientWidth)?(_7-_4.clientWidth):_7)+"px")>(_6.top=(((_8=_.scrollTop+e.clientY+10)>_.clientHeight-_4.clientHeight)?(_8-_4.clientHeight):_8)+"px"))) } document.onmousemove || (document.onmousemove = titleEffect); </script> </body> </html>

myhome 发布于2007-04-26 16:38:46: 为什么要用两个 padding ？

biyuan 发布于2007-04-26 16:55:30: 纯属手误^__^

iou33449999发布于2008-04-13 02:17:04: 为什么title要不停地跟随鼠标呢，害的偶眼都花呢？就不能让他出来后就别晃了吗？

你的代码偶没有改一个子，只是省略了很多的，不然眼更花了吼吼！
CODE:
<html> <head> <title>titleEffect</title> </head> <style type="text/css">body, td { font-size: 12px; line-height: 20px; }</style> <body> 我们要： <a href="#" title="个子高高的个子高高的个子高高的">个儿高</a> <a href="#" title="成绩棒棒的成绩棒棒的成绩棒棒的">学习高</a> <a href="#" title="身体壮壮的身体壮壮的身体壮壮的">身体棒</a> <script type="text/javascript"> function titleEffect(e) { e = e || event; var element = e.srcElement || e.target; var body = document.body; var tip = document.getElementById("tip-div"); if (!tip) { tip = document.createElement("div"); tip.id = "tip-div"; with (tip.style) { display = "none"; color = "#000"; backgroundColor = "#f3f3f3"; border = "1px solid #cccccc"; fontSize = "12px"; padding = "5px"; lineHeight = "16px"; position = "absolute"; left = "0"; top = "0"; zIndex = 2000; // 一个足够大的数，保证层会处于最上层 } body.appendChild(tip); } var title = element.getAttribute("title") || element.getAttribute("_title"); if (!title) return (tip.style.display=="block") && (tip.style.display="none"); if (element.getAttribute("title")) { element.setAttribute("title", ""); element.setAttribute("_title", title); } tip.style.display = "block"; if (tip.innerHTML == title) return ; else tip.innerHTML = "<img src='http://bbs.51js.com/images/default/red_folder.gif' align='absmiddle' /> " + title; var left = body.scrollLeft + e.clientX + 10; left = (left>body.clientWidth-tip.clientWidth) ? (left-tip.clientWidth) : left; var top = body.scrollTop + e.clientY + 10; top = (top>body.clientHeight-tip.clientHeight) ? (top-tip.clientHeight) : top; tip.style.left = left + "px"; tip.style.top = top + "px"; } document.onmousemove = titleEffect; </script> </body></html>[ 本帖最后由 iou33449999 于 2008-4-13 02:19 编辑 ]

mypda07发布于2008-04-13 05:20:16: 有点意思，加油！！

lovelylife发布于2008-04-13 15:14:25: QUOTE:
原帖由 dron 于 2007-4-26 08:58 发表
效果很不错，

不过这里得批评老碧，你不仅沾污了 window.onload 的方法，还霸占了所有 a标签的 onmouseover　和 onmouseout　事件。。　假如我某个 a　刚好定义了自己的 onmouseover事件函数，则会被你的程序 ...
呵呵，这个是的
我以前做个项目的时候，总是喜欢重载window.onload函数，尤其是做页面全局初始化的时候，因为是放在一个脚本文件，用在好多的页面当中，当时没有考虑其他页面可能用到onload，或者body标签中用到了onload事件，导致全局初始化失败，后来再也不用onload重载了，建议用attachEvent("onload", lpfunc); 这样影响会小些

:-)

马夹发布于2008-04-13 15:32:06: 经典,不错!不知道加入图片和DIV会不会出错呢!

lastgame发布于2008-04-14 13:49:21: 很好！

fly124.cn 发布于2008-04-14 15:54:01: 这个Title 效果有问题,当页面出现滚动条的时候。就有问题。下面代码全部是来自楼主的。
我就加了些 ，就有问题了。
呵呵
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>LandscapingTitle demo!</title> <script language="JavaScript"> window.onload = function(){ var by_title_tmp = new String(); var tags = document.getElementsByTagName("a"); for(var i = 0 ; i < tags.length ; i ++){ tags[i].onmouseover = function(event){ event = event ? event : window.event; var by_title_div = document.createElement("div"); by_title_div.id = "by_title_div"; by_title_div.style.position = "absolute"; by_title_div.style.border = "1px solid #cccccc"; by_title_div.style.padding = "5px"; by_title_div.style.backgroundColor = "#f3f3f3"; by_title_div.style.fontSize = "12px"; by_title_div.innerHTML = "<img src='http://bbs.51js.com/images/default/red_folder.gif' align='absmiddle' /> " + this.title; by_title_tmp = this.title; this.title = ""; document.getElementsByTagName("body")[0].appendChild(by_title_div); (document.documentElement.clientHeight - event.clientY - 20 > document.getElementById("by_title_div").clientHeight) ? by_title_div.style.top = (event.clientY + 20 + "px") : by_title_div.style.bottom = "40px"; (document.body.clientWidth - event.clientX > document.getElementById("by_title_div").clientWidth) ? by_title_div.style.left = (event.clientX + "px") : by_title_div.style.right = "0px"; } tags[i].onmouseout = function(){ document.getElementsByTagName("body")[0].removeChild(document.getElementById("by_title_div")); this.title = by_title_tmp; } } } </script> </head> <body> <div style="width:100%;text-align:right"><a href="#" title="提示一提示一提示一">为了我们的身心健康为了我们的身心健康为了我们的身心健康</a></div> <a href="#" title="提示一">我们应该</a> <a href="#" title="提示三">多抽烟</a> <a href="#" title="提示四">多喝酒</a> </body> </html>[ 本帖最后由 fly124.cn 于 2008-4-14 15:55 编辑 ]

AJan发布于2008-04-19 17:50:43: 都没我弄的好!

进入论坛，查看全部评论

关于作者

封装一个title提示效果（兼容Firefox）

全部脚印 不留脚印 留下脚印:

全部脚印不留脚印留下脚印: