这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现鼠标滑过显示边框的菜单效果, 涉及 javascript 响应鼠标事件动态修改页面元素的相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0528/331680.html