漂亮的仿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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 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
phpmyadmin的#1251问题
2006/11/25 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
Python手机号码归属地查询代码
2016/05/04 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
django的model操作汇整详解
2019/07/26 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python下载的库包存放路径
2020/07/27 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
介绍一下MD5加密算法
2016/11/12 面试题
生物技术研究生自荐信
2013/11/12 职场文书
高中军训感言400字
2014/02/24 职场文书
服装设计专业求职信
2014/06/16 职场文书
开服装店计划书
2014/08/15 职场文书
单位接收函格式
2015/01/30 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Python中time标准库的使用教程
2022/04/13 Python