漂亮的仿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 相关文章推荐
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
angular多语言配置详解
May 16 Javascript
js实现随机点名程序
Sep 17 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
js实现tab栏切换效果
Aug 02 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP中实现图片的锐化
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
Vue.use源码分析
2017/04/22 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python实现多张图片拼接成大图
2019/01/15 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
DBA的职责都有哪些
2012/05/16 面试题
编辑求职信样本
2013/12/16 职场文书
十八大闭幕感言
2014/01/22 职场文书
公务员转正考察材料
2014/02/07 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
常用的Python代码调试工具总结
2021/06/23 Python
Python 全局空间和局部空间
2022/04/06 Python