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

http://www.veryhuo.com 烈火学院 2011-09-01 投递稿件

　　鼠标指向文字链接弹出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>
提示：可修改后代码再运行!

上一篇：点击按钮Alert弹出遮罩层效果的提示框代码
下一篇：基于CSS+dIV的网页层，点击后隐藏或显示

相关阅读

网友评论

栏目导航

本类年榜本类月榜

推荐软件

推荐阅读相关下载

关于我们 | 联系方式 | 广告服务 | 站内搜索 | 网站合作 | 免责声明 | 网站地图 | 反馈意见 | 回到顶部