漂亮的仿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 &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
jqTransform美化表单
2015/10/10 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
查看Django和flask版本的方法
2018/05/14 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Python中请不要再用re.compile了
2019/06/30 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
校园奶茶店创业计划书
2014/01/23 职场文书
同事打架检讨书
2014/02/04 职场文书
敬老院标语
2014/06/27 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
工厂见习报告范文
2014/10/31 职场文书
工作失误检讨书
2015/01/26 职场文书
幼儿园开学报名通知
2015/07/16 职场文书