菜单

jQuery实现鼠标悬停背景翻转的黑色导航菜单代码_jquery_脚本之家【澳门太阳集团】

2020年3月1日 - 新闻中心

澳门太阳集团,jQuery实现鼠标悬停背景翻转的黑色导航菜单代码_jquery_脚本之家【澳门太阳集团】。本文实例陈述了jQuery达成鼠标悬停背景翻转的海螺红导航菜单代码。分享给大家供我们仿照效法。具体如下:

那是一款jQuery达成的鼠标悬停背景翻转的驼灰导航菜单菜单,预览效果时左下角会提醒错误,何况看不到效果,刷新一下就能够见到成效了;当然,在骨子里行使中,不会冒出如此的难点。

导航菜单-鼠标悬停背景翻转的黑色jQuery菜单.menu{height:41px;display:block;width:662px;}.menu ul{list-style:none;padding:0;margin:0;}.menu ul li{float:left;overflow:hidden;position:relative;text-align:center;height:38px;line-height:31px;*line-height:33px;background:url repeat-x;}.menu ul li a{position:relative;display:block;width:81px;height:31px;font-family:"Microsoft Yahei";font-size:12px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;cursor:pointer;}.menu ul li a span{position:absolute;left:0;width:81px;}.menu ul li a span.out{top:0px;}.menu ul li a span.over,.menu ul li a span.bg{top:-45px;}#menu{position:absolute;margin:4px 0px 0px 295px;*margin:4px 0px 0px -185px;}#menu ul li a{color:#fff;text-decoration:none;}#menu ul li a span.over{color:#000;text-decoration:none;}#menu ul li span.bg{height:32px;background:url center center no-repeat;}#menu .fl{background:url no-repeat;width:7px;height:38px;float:left;}#menu .fr{background:url no-repeat -8px 0px;width:7px;height:38px;float:right;}$.ready { $.wrapInner.append; $.each { $.text.appendTo; $.hover { $.animate; // move down - hide $.animate; // move down - show $.animate; // move down - show }, function.stop().animate; // move up - show $.animate({'top': '-45px'}, 250); // move up - hide $.animate({'top': '-45px'}, 120); // move up - hide }); $.wrapInner; $.each { $.text.appendTo; $.hover { $.animate; // move down - hide $.animate; // move down - show }, function.stop().animate; // move up - show $.animate({'top': '-45px'}, 200); // move up - hide });});      脚本之家 产品介绍 软件下载 商业授权 模板市场 脚本下载 交流论坛 脚本交流   

但愿本文所述对我们的jQuery程序设计有所扶植。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图