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

 更新时间:2013年03月27日 09:59:30   作者:   我要评论
今天介绍一个jQuery渐变发光效果的导航菜单,这是一个简单的通过jQuery控制opacity实现的导航菜单。

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

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导航菜单能够给你一些灵感。

相关文章

  • Jquery表单验证失败后不提交的解决方法

    Jquery表单验证失败后不提交的解决方法

    很多人可能都会遇到在调试的时候用了return了false,可为什么还会提交呢?这个问题我最近也碰到了,尝试了多次也没有用,后来终于发现了其中的问题,下面分享处理给大家,让同样遇到这个问题的朋友们能够看看,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • jQuery使用正则表达式替换dom元素标签用法示例

    jQuery使用正则表达式替换dom元素标签用法示例

    这篇文章主要介绍了jQuery使用正则表达式替换dom元素标签的方法,结合具体实例形式分析了jQuery正则替换的操作技巧,需要的朋友可以参考下
    2017-01-01
  • JQuery与Ajax常用代码实现对比

    JQuery与Ajax常用代码实现对比

    JQuery与Ajax常用代码实现对比,大家可以看下,根据实际情况选用。
    2009-10-10
  • Jquery全选与反选点击执行一次的解决方案

    Jquery全选与反选点击执行一次的解决方案

    在做项目时遇到一个bug,checkbox全选与反选功能,只能点击一次,再点就不起作用了,为了解决此问题,我查找了好多资料,下面把具体解决方案整理分享给大家,需要的朋友可以参考下
    2015-08-08
  • jQuery使用post方法提交数据实例

    jQuery使用post方法提交数据实例

    这篇文章主要介绍了jQuery使用post方法提交数据,实例分析了jQuery中post方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jQuery 插件仿百度搜索框智能提示(带Value值)

    jQuery 插件仿百度搜索框智能提示(带Value值)

    因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个,代码给予简单的注释,结构很清晰,很容易看懂,感兴趣的朋友可以了解下
    2013-01-01
  • jquery选择器(常用选择器说明)

    jquery选择器(常用选择器说明)

    jquery选择器,比较常用的选择器说明,学习jquery的朋友一定要学习与了解的知识。
    2010-09-09
  • jQuery使用之处理页面元素用法实例

    jQuery使用之处理页面元素用法实例

    这篇文章主要介绍了jQuery使用之处理页面元素用法,实例分析了jQuery针对元素的内容、复制、移动和替换等操作技巧,需要的朋友可以参考下
    2015-01-01
  • 谈谈Jquery ajax中success和complete有哪些不同点

    谈谈Jquery ajax中success和complete有哪些不同点

    jquery ajax中success和complete有哪些不同点呢?大家都了解吗,接下来通过本篇文章给大家介绍jquery ajax中success和complete的不同点,感兴趣的朋友一起学习吧
    2015-11-11
  • jquery超简单实现手风琴效果的方法

    jquery超简单实现手风琴效果的方法

    这篇文章主要介绍了jquery超简单实现手风琴效果的方法,只需要几行代码即可实现手风琴效果的样式变换功能,需要的朋友可以参考下
    2015-06-06

最新评论