漂亮的仿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 multibox 全选
Mar 22 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
React如何避免重渲染
Apr 10 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 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插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP实现微信对账单处理
2018/10/01 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python aiohttp的使用详解
2019/06/20 Python
Python中的类与类型示例详解
2019/07/10 Python
python实现图片横向和纵向拼接
2020/03/05 Python
python中如何进行连乘计算
2020/05/28 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
信息技术毕业生自荐信范文
2014/03/13 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
安全生产宣传标语
2014/06/06 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
党员民主评议个人总结
2014/10/20 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2016入党心得体会范文
2016/01/06 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android