漂亮的仿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 25 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
深入了解js原型模式
May 30 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 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
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
js时间控件只显示年月
2017/01/08 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
python实现的系统实用log类实例
2015/06/30 Python
python 类详解及简单实例
2017/03/24 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
书法培训心得体会
2014/01/05 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python