jQuery渐变发光导航菜单的实例代码


Posted in Javascript onMarch 27, 2013

jQuery渐变发光导航菜单的实例代码

jQuery渐变发光导航菜单的实例代码

下面和大家分享一下具体的实现过程。

HTML标签结构:

<ul class="animation_menu">
     <li class="current">
         <a href="#">菜单一<span>菜单一</span></a>
     </li>
     <li>
         <a href="#">菜单二<span>菜单二</span></a>
     </li>
     <li>
         <a href="#">菜单三<span>菜单三</span></a>
     </li>
     <li>
         <a href="#">菜单四<span>菜单四</span></a>
     </li>
 </ul>

CSS样式:
li的样式:

.animation_menu li{
    /*块状模式显示,并使其水平平铺显示*/
    display:block;
    float: left;
    /*宽高是背景图片的*/
    width: 111px;
    height: 50px;
    /*设置文字垂直水平居中*/
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    list-style-type:none;
}

初始看到的a的样式:

.animation_menu li a {
    /*这里是我们背景图片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;    /*设置position属性是为了里面的span能够以a为基准进行定位*/
    position: relative;

    display: block;
    /*我们不使用纯黑色*/
    color: #292724;
    text-decoration:none;
}

hover后看到的span的样式:

.animation_menu li a span {
    /*这里是我们背景图片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;
    /*设置块模式显示,并制定宽高和a的宽高一样,和绝对位置,这是为了使其和a里面的文字重合显示*/
    display: block;
    height: 50px;
    width: 111px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color:#FFE2BB;
}

用sprite技术定位,a和span各种状态的样式:

/*正常状态下的样式*/
.animation_menu li a {
    /*一般灰色背景*/
    background-position: 0 -153px;
}
    /*hover蓝色高亮背景*/
    .animation_menu li a span {
        background-position: 0 -102px;
    }
/*链接激活状态下的样式*/
.animation_menu li.current a {
     /*一般灰色高亮背景*/
    background-position: 0 0;
}
    /*hover黄色高亮背景*/
    .animation_menu li.current a span {
        background-position: 0 -51px;
    }

css的工作到此就结束了,下面我们来看看javascript。

最后是JavaScript
菜单的渐变效果主要是通过控制opacity实现的,请看下面代码。

// 通过将opacity设置为0,将span的样式和文字隐藏起来
$(".animation_menu li a span").css("opacity", "0");
// 绑定hover事件
$(".animation_menu li a span").hover(
    //mouse on事件
    function () {
        // 通过动态的改变opacity从0到1,这样span的样式和文字就会慢慢的显示出来,覆盖a的样式
        $(this).stop().animate({
            opacity: 1
        }, "slow");
    },
    //mouse out事件
    function () {
        // 当鼠标移走的时候,动态改变为0,这样span又看不见了,看到原来的a的样式了。
        $(this).stop().animate({
            opacity: 0
        }, "slow");
    }
);
//绑定click事件,点击当前连接,为li添加current class,同时移除其他li的current class
$(".animation_menu li a").click(function () {
    $(".animation_menu li a").each(function (index, item) {
        $(item).parent().removeClass("current");
    });
    $(this).parent().addClass("current");
});

到此全部结束,希望这个jQuery导航菜单能够给你一些灵感。

Javascript 相关文章推荐
Javascript 按位取反运算符 (~)
Feb 04 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
javascript关于继承解析
May 10 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 #Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 #Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 #Javascript
javascript变量作用域使用中常见错误总结
Mar 26 #Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 #Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 #Javascript
jquery 无限级联菜单案例分享
Mar 26 #Javascript
You might like
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
基于Python实现文件大小输出
2016/01/11 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
乡镇干部十八大感言
2014/02/17 职场文书