漂亮的仿flash菜单,来自蓝色经典


Posted in Javascript onJune 26, 2006

<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>

<script>
/*
http://lexrus.blueidea.com

这是把事件动作绑定到菜单上的函数
*/
function attachXMenu(objid){
 var tds=objid.getElementsByTagName('td');
 for(var i=0;i<tds.length;i++){
  with(tds[i]){
   onmouseover=function(){
    with(this){
     filters[0].apply();
     style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
     style.border='1px solid #ffffff'; //边框
     style.color='black'; //文字颜色
     filters[0].play();
    }
   }
   onmouseout=function(){
    with(this){
     filters[0].apply();
     style.background='#336699'; //这是鼠标离开时的背景颜色
     style.border='1px solid #336699'; //边框
     style.color='#ffffff'; //文字颜色
     filters[0].play();
    }
   }
  }
 }
}
</script>

<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
 <tr>
  <td><a href="http://www.lenvo.cn/">www.lenvo.cn</a></td>
  <td>Name</td>
  <td>Is</td>
  <td>LeX</td>
  <td>Rus</td>
  <td>!!!</td>
 </tr>
</table>

<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>
<br><br><br><br>
<!--下面这个是竖排的-->
<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
 <tr><td>My</td></tr>
 <tr><td>Name</td></tr>
 <tr><td>Is</td></tr>
 <tr><td>LeX</td></tr>
 <tr><td>Rus</td></tr>
 <tr><td>!!!</td></tr>
</table>
<script>attachXMenu(xmenu1);</script>

Javascript 相关文章推荐
javascript dom 基本操作小结
Apr 11 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
angular分页指令操作
Jan 09 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
js实现选项卡效果
Mar 07 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
经典的带阴影的可拖动的浮动层
Jun 26 #Javascript
些很实用且必用的小脚本代码
Jun 26 #Javascript
如果文字过长,则将过长的部分变成省略号显示
Jun 26 #Javascript
接收键盘指令的脚本
Jun 26 #Javascript
客户端静态页面玩分页
Jun 26 #Javascript
图片之间的切换
Jun 26 #Javascript
超级强大的表单验证
Jun 26 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
不安全的常用的js写法
2009/09/15 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python+mysql实现教务管理系统
2019/02/20 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python tkinter控件布局项目实例
2019/11/04 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python中的对数log函数表示及用法
2020/12/09 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
关于运动会的广播稿50字
2014/10/17 职场文书
户外活动总结
2015/02/04 职场文书
数学教师个人总结
2015/02/06 职场文书
python flask框架快速入门
2021/05/14 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Redis Stream类型的使用详解
2021/11/11 Redis
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android