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中Array 对象相关的几个方法
Dec 22 Javascript
JavaScript中“+=”的应用
Feb 02 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
js实现轮播图特效
May 28 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
鼠标放在图片上显示大图的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
漂亮但不安全的CTB
2006/10/09 PHP
我的论坛源代码(九)
2006/10/09 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
python实现树形打印目录结构
2018/03/29 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
详解Python中的文件操作
2021/01/14 Python
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
化学实验员岗位职责
2013/12/28 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
法制宣传口号
2014/06/16 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android