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 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
javascript中clone对象详解
2014/12/03 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
python抓取网页中图片并保存到本地
2015/12/01 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
通过cmd进入python的实例操作
2019/06/26 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Python中如何添加自定义模块
2020/06/09 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
企业车辆管理制度
2014/01/24 职场文书
个人安全承诺书
2014/05/22 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
文明班级申报材料
2014/12/24 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏