JS实现鼠标滑过显示边框的菜单效果


Posted in Javascript onSeptember 21, 2016

本文实例讲述了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 对象的定义方法
Jan 10 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
下拉框select的绑定示例
Sep 04 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 #Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 #Javascript
AngularJS通过$http和服务器通信详解
Sep 21 #Javascript
JavaScript 拖拽实例代码
Sep 21 #Javascript
Angularjs中controller的三种写法分享
Sep 21 #Javascript
jQuery中Find选择器用法示例
Sep 21 #Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 #Javascript
You might like
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
Python环境变量设置方法
2016/08/28 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
详解Anaconda 的安装教程
2020/09/23 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
运动会表扬稿大全
2014/01/16 职场文书
求职自荐信怎么写
2014/03/06 职场文书
民政局个人整改措施
2014/09/24 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
2016七夕情人节感言
2015/12/09 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
如何利用python实现列表嵌套字典取值
2022/06/10 Python