漂亮的仿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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 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
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
python中解析json格式文件的方法示例
2017/05/03 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
详细分析Python垃圾回收机制
2020/07/01 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
高三生物教学反思
2014/01/25 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
个人考核材料
2014/05/15 职场文书
法定代表人资格证明书
2014/09/11 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
业务员管理制度范本
2015/08/06 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫