漂亮的仿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 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
微信小程序反编译的实现
Dec 10 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 访问被拒绝的真实原因
2009/06/15 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
js 颜色选择插件
2017/01/23 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python工程师面试题 与Python Web相关
2016/01/14 Python
python黑魔法之参数传递
2016/02/12 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
如何通过python检查文件是否被占用
2020/12/18 Python
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
先进集体获奖感言
2014/02/13 职场文书
廉洁教育学习材料
2014/05/19 职场文书
婚内分居协议书范文
2014/11/26 职场文书
授权委托书
2015/01/28 职场文书
单位考核鉴定意见
2015/06/05 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android