漂亮的仿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 当前日期加(天、周、月、年)
Aug 09 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
详解Vue之事件处理
Jul 10 Javascript
vue3中的组件间通信
Mar 31 Vue.js
详解如何使用Node.js实现热重载页面
May 06 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
基于文本的搜索
2006/10/09 PHP
PHP4实际应用经验篇(2)
2006/10/09 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP安全配置详细说明
2011/09/26 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
php实现的二分查找算法示例
2017/06/20 PHP
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JavaScript函数详解
2015/02/27 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python实现的重启关机程序实例
2014/08/21 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
体育教学随笔感言
2014/02/24 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
工伤调解协议书
2016/03/21 职场文书