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 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
鼠标放在图片上显示大图的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 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
Web制作验证码功能实例代码
2017/06/19 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python通过文件头判断文件类型
2015/10/30 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
在家更换处方镜片:Lensabl
2019/05/01 全球购物
中华美德颂演讲稿
2014/05/20 职场文书
论群众路线学习笔记
2014/11/06 职场文书
法院答辩状格式
2015/05/22 职场文书
如何写好开幕词?
2019/06/24 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
SQLServer之常用函数总结详解
2021/08/30 SQL Server