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

更新时间：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需再刷新一下页面才能执行]

js生成二维码的示例代码
这篇文章主要介绍了js生成二维码的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-03-03
Locate a File Using a File Open Dialog Box
Locate a File Using a File Open Dialog Box...
2007-06-06
2020京东618叠蛋糕js脚本(亲测好用)
这篇文章主要介绍了京东618叠蛋糕js脚本，基于auto.js 打开，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
Bootbox将后台JSON数据填充Form表单的实例代码
通过控制器创建一个Index视图，写入下列HTML代码，这里我创建了一个分部视图，不创建直接写在同一个页面也是一样的效果。这篇文章主要介绍了Bootbox将后台JSON数据填充Form表单 ,需要的朋友可以参考下
2018-09-09
javascript实现的制作特殊字的脚本
javascript实现的制作特殊字的脚本...
2007-06-06
javaScript合并对象的多种方式及知识扩展
众所周知JavaScript中有多种方法可以合并对象,下面这篇文章主要给大家介绍了关于javaScript合并对象的多种方式及知识扩展,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
js或jquery动态输出select option的实现代码
在 JavaScript 中动态生成 <option> 元素并添加到 <select> 下拉列表中,可以通过以下几种方式实现,以下是不同场景下的完整代码示例
2025-03-03
微信小程序如何使用globalData的方法
这篇文章主要介绍了微信小程序如何使用globalData的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
web前端页面生成exe可执行文件的方法
这篇文章给大家介绍了Electron 怎么将网页打包成桌面应用（web前端页面怎么生成exe可执行文件），感兴趣的朋友跟随脚本之家小编一起学习吧
2018-02-02
css+html+js实现五角星评分
这篇文章主要为大家详细介绍了css+html+js实现五角星评分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具