船长 发表于 2009-02-18 10:21 | 分类：javascript | 阅读数：191 次
链接提示效果，鼠标悬浮在链接上时提示层的效果，可以自己设计得更美观些，此处为样例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <TITLE>链接提示效果</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- body { margin: 0px; background-color: #fff; text-align: center; } body, td, th { color: #FFFFFF; font-size: 12px; line-height:22px; } #dhtmltooltip { position: absolute; width: 150px; border: 1px solid #333; padding: 1px; background-color: #fff; visibility: hidden; z-index: 100; } .main { height:100px; width:300px; padding:10px; border:#ddd 1px dashed; } --> </style> </head> <body> <div id="dhtmltooltip"></div> <script type="text/javascript"> var offsetxpoint=-60 var offsetypoint=20 var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thecolor, thewidth){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000 if (rightedge<tipobj.offsetWidth) tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" else if (curX<leftedge) tipobj.style.left="5px" else tipobj.style.left=curX+offsetxpoint+"px" if (bottomedge<tipobj.offsetHeight) tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" else tipobj.style.top=curY+offsetypoint+"px" tipobj.style.visibility="visible" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script> <div class="main"> <div><a href="#" onMouseover="ddrivetip('web集结号，网络中集结号...','#ff0000', 300)" onMouseout="hideddrivetip()">吹响web集结号</a></div> <div><a href="#" onMouseover="ddrivetip('web集结号，网络中集结号...','#00ff00', 300)" onMouseout="hideddrivetip()">吹响web集结号</a></div> <div><a href="#" onMouseover="ddrivetip('web集结号，网络中集结号...','#0000ff', 300)" onMouseout="hideddrivetip()">吹响web集结号</a></div> </div> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
验证条码： *
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
