漂亮的仿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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
js中判断控件是否存在
Aug 25 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
vue实现购物车的监听
Apr 20 Javascript
vue如何使用rem适配
Feb 06 Vue.js
经典的带阴影的可拖动的浮动层
Jun 26 #Javascript
些很实用且必用的小脚本代码
Jun 26 #Javascript
如果文字过长,则将过长的部分变成省略号显示
Jun 26 #Javascript
接收键盘指令的脚本
Jun 26 #Javascript
客户端静态页面玩分页
Jun 26 #Javascript
图片之间的切换
Jun 26 #Javascript
超级强大的表单验证
Jun 26 #Javascript
You might like
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
详解Python time库的使用
2019/10/10 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
生物制药自我鉴定
2014/01/25 职场文书
文体活动实施方案
2014/03/27 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
个人安全生产承诺书
2014/05/22 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
部队2015年终工作总结
2015/04/02 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
行政复议决定书
2015/06/24 职场文书
手写实现JS中的new
2021/11/07 Javascript
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL