漂亮的仿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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
Node学习记录之cluster模块
May 31 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
Javascript中的解构赋值语法详解
Apr 02 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
详解Vue数据驱动原理
2020/11/17 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
医院护理人员的自我评价分享
2013/10/04 职场文书
老师自我鉴定范文
2013/12/25 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
联谊活动总结
2014/08/28 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
2014年绿化工作总结
2014/12/09 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
会议主持人开场白台词
2015/05/28 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python