给链接加上漂亮的对话框式提示效果

发表时间：2010-04-02关注度：430 views 评论数：0

鼠标滑过链接出现的对话框式提示效果，自适应大小。 [runcode height="300"] 无标题文档 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.getEl...

鼠标滑过链接出现的对话框式提示效果，自适应大小。

<!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(http://www.bx115.com/upfile/2009723/20097239213041044.gif) no-repeat top}.tooltip b.bottom{padding:3px 8px 15px;color: #548912; background: url(http://www.bx115.com/upfile/2009723/20097239213041044.gif) no-repeat bottom} </style> </head> <body> <div style="margin-bottom:10px;">由时代前端收集整理 <a href=http://www.52shidai.com _fcksavedurl="http://www.52shidai.com" _fcksavedurl="http://www.52shidai.com">http://www.52shidai.com/ 时代前端</a></div> <div id="container"> <p><a href=# title="Com@'s space">My space</a></p> <p><a href=# title="设计部落 http://www.websjy.com/my">设计部落</a></p> <p><a href=# title="Com@'s space">My space</a></p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明文章转载自：网站前端,web前端,前端脚本,前端优化|时代前端 [http://www.52shidai.com]
本文链接地址：给链接加上漂亮的对话框式提示效果

标签：提示框, 漂亮, 链接

上一篇: 优化textarea的样式—textarea背景图片的设置

下一篇:带缓冲显示和收缩的隐藏层效果

您可能感兴趣的文章

发表评论

最热文章
- 100个最漂亮|免费的wordpress模板 - 3,072 views
- 漂亮的javascript对话框(弹出层)组件[附源码] - 2,272 views
- wordpress采集插件—wp-o-matic使用详解 - 1,981 views
- 开启wordpress 3.0多用户的方法 - 1,781 views
- 12个用jQuery插件改变Button按钮的漂亮特效 - 1,765 views
- 国人原创的WordPress杂志主题wp-cms - 1,650 views
- jQuery-bind不能处理绑定hover事件 - 1,615 views
- 封装好的javascript图片滑动效果 - 1,571 views
- 推荐5个漂亮的jquery主流图表插件 - 1,557 views
- 文字向上不间断滚动代码-兼容各浏览器 - 1,362 views
最新文章
热门标签

canvas google html HTML5 JavaScript jQuery SEO wordpress 主题优化关键字兼容函数前端优化博客友情链接图片外链工具常用性能技巧排名推广插件搜索搜索引擎收录教程文章方法时间权重模板滚动漂亮特性百度经典网站菜单谷歌遍历链接鼠标滚轮

网站前端,web前端,前端脚本,前端优化|时代前端