jQuery 一个漂亮的Title链接提示效果

发布时间：2018-08-21 03:28 所属栏目：121 来源：站长网

导读：一个漂亮的title链接提示效果，这是笔者在一位前端牛人的博客上看到的，忘记博客的地址和名字了，在这里表示歉意。基于jquery脚本，当鼠标放到超级链接上时显示title和链接地址的效果，但如果仅仅使用jquery做这个效果的话有点大材小用了。如果你在网站上

　　一个漂亮的title链接提示效果，这是笔者在一位前端牛人的博客上看到的，忘记博客的地址和名字了，在这里表示歉意。

　　基于jquery脚本，当鼠标放到超级链接上时显示title和链接地址的效果，但如果仅仅使用jquery做这个效果的话有点大材小用了。如果你在网站上已经使用了jQuery的话，那么正好可以利用这个东西了。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!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提示效果 - Liehuo.Net</title> <base href="http://www.veryhuo.com"> <script src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ enableTooltips(); }); 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 = "No Reslut"; // return; 注释掉这一行则不显示 } 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> <style type="text/css" /> .tooltip { width: 200px; color: #000; font: lighter 11px/ 1.3 Arial, sans-serif; text-decoration: none; text-align: center; word-break:break-all;word-wrap:break-word; } .tooltip span.top { padding: 30px 8px 0; background: url(/uploads/allimg/1008/liehuo_net_1.gif) no-repeat top; } .tooltip b.bottom { padding: 3px 8px 15px; color: #548912; background: url(/uploads/allimg/1008/liehuo_net_1.gif) no-repeat bottom; } </style> </head> <body> <a title="烈火学院 Liehuo.Net" href="http://www.veryhuo.com/">js tooltip</a><br />把鼠标放到上面的链接上，查看效果试试！ </div> </body> </html> <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）