码迷,mamicode.com
首页 > Web开发 > 详细

基于jQuery鼠标悬停上下滑动导航条

时间:2015-06-11 16:49:57      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

基于jQuery鼠标悬停上下滑动导航条。这是一款蓝色好看的鼠标响应式网站导航菜单特效。效果图如下:

技术分享

在线预览    源码下载

实现的代码。

html代码:

  <div id="menu2" class="menu">
        <ul>
            <li><a href="#">首 页</a></li>
            <li><a href="#">预报预警</a></li>
            <li><a href="#">气象新闻</a></li>
            <li><a href="#">气象服务</a></li>
            <li><a href="#">行政审批</a></li>
            <li><a href="#">信息公开</a></li>
            <li><a href="#">气象科普</a></li>
            <li><a href="#">党风廉政</a></li>
            <li><a href="#">气象科普</a></li>
        </ul>
        <div class="cls">
        </div>
    </div>

Javasctipt代码:

  $(document).ready(function () {

            $("#menu2 li a").wrapInner(‘<span class="out"></span>‘);

            $("#menu2 li a").each(function () {
                $(‘<span class="over">‘ + $(this).text() + ‘</span>‘).appendTo(this);
            });

            $("#menu2 li a").hover(function () {
                $(".out", this).stop().animate({ ‘top‘: ‘48px‘ }, 300); // move down - hide
                $(".over", this).stop().animate({ ‘top‘: ‘0px‘ }, 300); // move down - show

            }, function () {
                $(".out", this).stop().animate({ ‘top‘: ‘0px‘ }, 300); // move up - show
                $(".over", this).stop().animate({ ‘top‘: ‘-48px‘ }, 300); // move up - hide
            });

        });

via:http://www.w2bc.com/Article/42960

基于jQuery鼠标悬停上下滑动导航条

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4569236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!