漂亮的仿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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
详解vue路由
Aug 05 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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编写的导航条程序
2006/10/09 PHP
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python Django view 两种return的实现方式
2020/03/16 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
员工工作表扬信范文
2014/01/13 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年德育工作总结
2014/11/20 职场文书
幼儿园个人总结
2015/02/28 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
pandas中关于apply+lambda的应用
2022/02/28 Python