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

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 162 阅读

文章标签：

#javascript #ViewUI

本文介绍了一款使用jQuery实现的鼠标响应式网站导航菜单特效，包含HTML和JavaScript代码，实现鼠标悬停时导航条上下滑动的效果。

基于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://***/Article/42960