漂亮的仿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 相关文章推荐
如何在一个页面显示多个百度地图
Apr 07 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
JS实现数组深拷贝的方法分析
Mar 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
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
利用Python爬取可用的代理IP
2016/08/18 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
Django组件content-type使用方法详解
2019/07/19 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
试用期员工考核制度
2014/01/22 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
社团招新策划书
2014/02/04 职场文书
公务员转正考察材料
2014/02/07 职场文书
新教师岗前培训方案
2014/06/05 职场文书
ktv好的活动方案
2014/08/17 职场文书