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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
jQuery使用方法
Feb 04 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
vue中nextTick用法实例
Sep 11 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 中英文语言转换类
2011/09/07 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
解决Vue项目中tff报错的问题
2020/10/21 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python框架django基础指南
2016/09/08 Python
利用Python破解验证码实例详解
2016/12/08 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
人事科岗位职责范本
2014/03/02 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
阿凡达观后感
2015/06/10 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers