鼠标指向文字链接弹出DIV层，离开文本层消失

发布时间：2018-08-18 20:25:53 所属栏目：聚会来源：站长网

导读：鼠标指向文字链接弹出DIV层效果，大家自己运行下边的代码就可以看到效果了，当鼠标离开文本链接时，层就消失了，一种比较普遍的特效，可能对于一般的站长来说不是太实用，但是对于提高用户体验、增强网站的性能还是不错的，欢迎借鉴学习。烈火代码演示：

　　鼠标指向文字链接弹出DIV层效果，大家自己运行下边的代码就可以看到效果了，当鼠标离开文本链接时，层就消失了，一种比较普遍的特效，可能对于一般的站长来说不是太实用，但是对于提高用户体验、增强网站的性能还是不错的，欢迎借鉴学习。

　　烈火代码演示：

<!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=utf-8" /> <title>响应鼠标，超级链接显示、隐藏弹出层的例子</title> <style type="text/css"> body{ color:#008000; font:12px/1.5 arial; } a{ color:#0B59B2; margin:0 8px; } #box{ position:absolute; width:230px; height:60px; background:#F5F9FA; border:2px solid #95B5D5; display:none; } </style> <script type="text/javascript"> window.onload = function () { var aA = document.getElementsByTagName("a"); var oBox = document.getElementById("box"); var timer = null; var i = 0; for (; i < aA.length; i++) { aA[i].onmouseover = function () { clearTimeout(timer); var oParent = this.parentElement || this.parentNode; oBox.style.top = pageY(this) + this.offsetHeight + 5 + "px"; oBox.style.left = pageX(oParent) + "px"; oBox.style.display = "block" }; aA[i].onmouseout = oBox.onmouseout = function () { timer = setTimeout(function () { oBox.style.display = "none" }, 300) }; oBox.onmouseover = function () { clearTimeout(timer); } } }; function pageX (elem) { return elem.offsetLeft + (elem.offsetParent ? arguments.callee(elem.offsetParent) : 0) } function pageY (elem) { return elem.offsetTop + (elem.offsetParent ? arguments.callee(elem.offsetParent) : 0) } </script> </head> <body> <p>作者：<a href="javascript:;">swiss原子弹</a>发表日期：211-8-17 21:56:00</p> <p>作者：<a href="javascript:;">烈火网</a>发表日期：211-8-17 21:56:00</p> <p>作者：<a href="javascript:;">网友网友love</a>发表日期：211-8-17 21:56:00</p> <div id="box"></div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!