当鼠标滑过超链接出现提示框效果实例

更新时间：2013年04月09日 09:48:48 作者：

当鼠标滑过超链接出现提示框效果实例，需要的朋友可以参考一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript">function enableTooltips(id){var links,i,h;if(!document.getElementById || !document.getElementsByTagName) return;AddCss();h=document.createElement("span");h.id="btc";h.setAttribute("id","btc");h.style.position="absolute";document.getElementsByTagName("body")[0].appendChild(h);if(id==null) links=document.getElementsByTagName("a");else links=document.getElementById(id).getElementsByTagName("a");for(i=0;i<links.length;i++){Prepare(links[i]);}}function Prepare(el){var tooltip,t,b,s,l;t=el.getAttribute("title");if(t==null || t.length==0) t="link:";el.removeAttribute("title");tooltip=CreateEl("span","tooltip");s=CreateEl("span","top");s.appendChild(document.createTextNode(t));tooltip.appendChild(s);b=CreateEl("b","bottom");l=el.getAttribute("href");if(l.length>30) l=l.substr(0,27)+"...";b.appendChild(document.createTextNode(l));tooltip.appendChild(b);setOpacity(tooltip);el.tooltip=tooltip;el.onmouseover=showTooltip;el.onmouseout=hideTooltip;el.onmousemove=Locate;}function showTooltip(e){document.getElementById("btc").appendChild(this.tooltip);Locate(e);}function hideTooltip(e){var d=document.getElementById("btc");if(d.childNodes.length>0) d.removeChild(d.firstChild);}function setOpacity(el){el.style.filter="alpha(opacity:95)";el.style.KHTMLOpacity="0.95";el.style.MozOpacity="0.95";el.style.opacity="0.95";}function CreateEl(t,c){var x=document.createElement(t);x.className=c;x.style.display="block";return(x);}function AddCss(){var l=CreateEl("link");l.setAttribute("type","text/css");l.setAttribute("rel","stylesheet");l.setAttribute("href","?.css");l.setAttribute("media","screen");document.getElementsByTagName("head")[0].appendChild(l);}function Locate(e){var posx=0,posy=0;if(e==null) e=window.event;if(e.pageX || e.pageY){posx=e.pageX; posy=e.pageY;}else if(e.clientX || e.clientY){if(document.documentElement.scrollTop){posx=e.clientX+document.documentElement.scrollLeft;posy=e.clientY+document.documentElement.scrollTop;}else{posx=e.clientX+document.body.scrollLeft;posy=e.clientY+document.body.scrollTop;}}document.getElementById("btc").style.top=(posy+10)+"px";document.getElementById("btc").style.left=(posx-20)+"px";}</script><script type="text/javascript">window.onload=function(){enableTooltips()};</script><style type="text/css">body{font: 76%/1.5 Arial,sans-serif;background: #FFF;color: #333}div#container{width: 500px;margin:0 auto}h1{color: #3CA3FF;margin: 1em 0 0;letter-spacing: -2px}p{margin: 0 0 1.7em}a{color: #F60;font-weight:bold}a:hover{color: #F00}.tooltip{width: 200px; color:#000;font:lighter 11px/1.3 Arial,sans-serif;text-decoration:none;text-align:center}.tooltip span.top{padding: 30px 8px 0;     background: url(https://www.jb51.net/images/uppic/200708171844190.gif) no-repeat top}.tooltip b.bottom{padding:3px 8px 15px;color: #548912;     background: url(https://www.jb51.net/images/uppic/200708171844190.gif) no-repeat bottom}</style></head><body><div id="container"><p><a href="https://www.jb51.net/" title="Com@'s space">My space</a></p></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

bootstrap select2插件用ajax来获取和显示数据的实例
今天小编就为大家分享一篇bootstrap select2插件用ajax来获取和显示数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
JavaScript与java语言有什么不同
java和JavaScript是两个不同的语言。那么这两个语言有什么不同呢？下面小编通过本文给大家介绍下
2016-09-09
原生JS实现逼真的图片3D旋转效果详解
这篇文章主要介绍了原生JS实现逼真的图片3D旋转效果,结合实例形式详细分析了javascript实现图片3D旋转相关操作技巧与注意事项,需要的朋友可以参考下
2019-02-02
微信小程序实现的涂鸦功能示例【附源码下载】
这篇文章主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
2018-01-01
跟我学习javascript的垃圾回收机制与内存管理
跟我学习javascript的垃圾回收机制与内存管理，感兴趣的小伙伴们可以参考一下
2015-11-11
Bootstrap Fileinput文件上传组件用法详解
这篇文章主要介绍了Bootstrap Fileinput文件上传组件用法详解的相关资料
2016-05-05
分享我对JS插件开发的一些感想和心得
这篇文章主要给大家分享我对JS插件开发的一些感想和心得的相关资料,需要的朋友可以参考下
2016-02-02
KnockoutJs快速入门教程
这篇文章主要为大家分享了KnockoutJs快速入门教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind语法来将模型数据绑定到DOM元素中，感兴趣的小伙伴们可以参考一下
2016-05-05
JS获得多个同name 的input输入框的值的实现方法
这篇文章主要介绍了基于JS代码实现input密码输入框输入密码变黑点密文以及JS获得多个同name 的input输入框的值的实现方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-01-01
javascript之Object.assign()的痛点分析
这篇文章主要介绍了javascript之Object.assign()的痛点分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03