JS实现鼠标滑过显示边框的菜单效果
2016-09-21 14:52
821 查看
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果。分享给大家供大家参考,具体如下:
<html> <head> <title>JS鼠标滑过显示边框菜单</title> </head> <body> <style> .menulines{ border:1px solid white; } .menulines a{ text-decoration:none; color:red; } </style> <script language="JavaScript1.2"> function borderize(what,color){ what.style.borderColor=color } function borderize_on(e){ if (document.all) source3=event.srcElement else if (document.getElementById) source3=e.target if (source3.className=="menulines"){ borderize(source3,"black") } else{ while(source3.tagName!="TABLE"){ source3=document.getElementById? source3.parentNode : source3.parentElement if (source3.className=="menulines") borderize(source3,"black") } } } function borderize_off(e){ if (document.all) source4=event.srcElement else if (document.getElementById) source4=e.target if (source4.className=="menulines") borderize(source4,"white") else{ while(source4.tagName!="TABLE"){ source4=document.getElementById? source4.parentNode : source4.parentElement if (source4.className=="menulines") borderize(source4,"white") } } } </script> <table border="0" width="150" cellspacing="0" cellpadding="0" onMouseover="borderize_on(event)" onMouseout="borderize_off(event)" height="95"> <tr><td width="100%" bgcolor="#E6E6E6" height="13"><b><font size="2">导航菜单</font></b></td></tr> <tr><td width="100%" class="menulines" height="14"><a href="#">网页特效</a></td></tr> <tr><td width="100%" class="menulines" height="14"><a href="#">学习教程</a></td></tr> <tr><td width="100%" class="menulines" height="14"><a href="#">网页素材</a></td></tr> <tr><td width="100%" class="menulines" height="14"><a href="#">软件下载</a></td></tr> <tr><td width="100%" class="menulines" height="14"><a href="#">平面设计</a></td></tr> </table> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JS实现鼠标滑过折叠与展开菜单效果代码
- mm_menu.js(实现鼠标移入横向显示二级菜单效果)(1)
- mm_menu.js(实现鼠标移入横向显示二级菜单效果)
- javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果
- JS实现鼠标滑过折叠与展开菜单效果代码
- 纯CSS实现鼠标滑过显示子菜单的二级菜单效果
- mm_menu.js(实现鼠标移入横向显示二级菜单效果)(2)
- js实现鼠标滑过文字链接色彩变化的效果
- jQuery实现鼠标滑过延时显示的效果
- js实现图片显示局部,鼠标经过显示全部的效果
- 鼠标悬浮显示二级菜单效果的jquery实现
- JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
- js实现鼠标滑过文字链接色彩变化的效果
- JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
- JQuery实现鼠标移动到图片上显示边框效果
- JS实现鼠标经过用户头像显示资料卡的效果,可点击
- jQuery实现鼠标滑过遮罩并高亮显示效果
- JS实现鼠标滑过图片的抖动效果
- js实现图片显示局部,鼠标经过显示全部的效果
- JS实现鼠标移动到缩略图显示大图的图片放大效果