漂亮的仿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脚本实现静态网页加密实例代码
Nov 05 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
微信小程序之数据绑定原理解析
Aug 14 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/06/05 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
护士自荐信怎么写
2013/10/18 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
读书活动总结
2014/04/28 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
教师节慰问信
2015/02/15 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
Redis入门教程详解
2021/08/30 Redis
关于 Python json中load和loads区别
2021/11/07 Python