漂亮的仿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高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
原生js+canvas实现验证码
Nov 29 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
菜鸟修复电子管记
2021/03/02 无线电
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
python如何保存文本文件
2020/06/07 Python
python实现xml转json文件的示例代码
2020/12/30 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
企业活动策划方案
2014/06/02 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android