漂亮的仿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 相关文章推荐
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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
php不用正则采集速度探究总结
2008/03/24 PHP
php 过滤危险html代码
2009/06/29 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
实例讲解React 组件
2020/07/07 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
用python生成1000个txt文件的方法
2018/10/25 Python
Django后台admin的使用详解
2019/07/08 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
性能服装:HYLETE
2018/08/14 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
文明美德伴我成长演讲稿
2014/05/12 职场文书
服务承诺书怎么写
2014/05/24 职场文书
员工团队活动方案
2014/08/28 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
纪律委员竞选稿
2015/11/19 职场文书
《三国志》赏析
2019/08/27 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
MySQL update set 和 and的区别
2021/05/08 MySQL