鼠标指向笔墨链接弹出DIV层，分开文本层消散

发布时间：2018-08-17 22:23:19 所属栏目：活动来源：站长网

导读：鼠标指向笔墨链接弹出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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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