首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery+css实现百度百科的页面导航效果

Posted in Javascript onDecember 16, 2014

这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。

下图为导航部分的效果图：

jQuery+css实现百度百科的页面导航效果

css和图片都是抄百度的，可从百度百科下载。

具体的代码如下：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="baidu.css">

    <style>

        * {

            margin: 0;

            padding: 0

        }
        .wrap {

            width: 1000px;

            overflow: hidden;

            margin: 0 auto;

        }
        .content {

            width: 780px;

            float: left;

        }
        .slide {

            width: 200px;

            float: right;

        }

    </style>

</head>

<body>

<div class="wrap">

<div class="content">

    <h2 class="headline-1">

        <a class="anchor-1" name="1"></a>

        <span class="headline-1-index">1</span>

        <span class="headline-content">part1</span>

    </h2>
    <div class="para">

        content1,content1

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="2"></a>

        <span class="headline-2-index">2</span>

        <span class="headline-content">part2</span>

    </h2>
    <div class="para">

        content2,content2

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="2-1"></a>

        <span class="headline-2-index">2-1</span>

        <span class="headline-content">part2-1</span>

    </h2>
    <div class="para">

        content2-1,content2-1

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="2-2"></a>

        <span class="headline-1-index">2-2</span>

        <span class="headline-content">part2-2</span>

    </h2>
    <div class="para">

        content2-2,content2-2

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="3"></a>

        <span class="headline-1-index">3</span>

        <span class="headline-content">part3</span>

    </h2>
    <div class="para3">

        content,content

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="4"></a>

        <span class="headline-1-index">4</span>

        <span class="headline-content">part4</span>

    </h2>
    <div class="para4">

        content,content

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="5"></a>

        <span class="headline-1-index">5</span>

        <span class="headline-content">part5</span>

    </h2>
    <div class="para">

        content5,content5

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="6"></a>

        <span class="headline-1-index">6</span>

        <span class="headline-content">part6</span>

    </h2>
    <div class="para">

        content6,content6

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="7"></a>

        <span class="headline-1-index">7</span>

        <span class="headline-content">part7</span>

    </h2>
    <div class="para">

        content7,content7

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="8"></a>

        <span class="headline-1-index">8</span>

        <span class="headline-content">part8</span>

    </h2>
    <div class="para">

        content8,content8

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="9"></a>

        <span class="headline-1-index">9</span>

        <span class="headline-content">part9</span>

    </h2>
    <div class="para">

        content9,content9

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="10"></a>

        <span class="headline-1-index">10</span>

        <span class="headline-content">part10</span>

    </h2>
    <div class="para">

        content10,content10

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="11"></a>

        <span class="headline-1-index">11</span>

        <span class="headline-content">part11</span>

    </h2>
    <div class="para">

        content11,content11

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="12"></a>

        <span class="headline-1-index">12</span>

        <span class="headline-content">part12</span>

    </h2>
    <div class="para">

        content12,content12

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="13"></a>

        <span class="headline-1-index">13</span>

        <span class="headline-content">part13</span>

    </h2>
    <div class="para">

        content13,content13

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="14"></a>

        <span class="headline-1-index">14</span>

        <span class="headline-content">part14</span>

    </h2>
    <div class="para">

        content14,content14

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <h2 class="headline-1">

        <a class="anchor-1" name="15"></a>

        <span class="headline-1-index">15</span>

        <span class="headline-content">part15</span>

    </h2>
    <div class="para">

        content15,content15

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        bottom

    </div>

</div>

<div class="slide">

    <div id="sideToolbar" style="display: block; position: fixed;">

        <div id="sideCatalog" class="sideCatalogBg" style="visibility: visible;">

            <div id="sideCatalog-sidebar">

                <div class="sideCatalog-sidebar-top"></div>

                <div class="sideCatalog-sidebar-bottom"></div>

            </div>

            <div id="sideCatalog-updown" style="visibility: visible;">

                <div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻页"></div>

                <div id="sideCatalog-down" class="sideCatalog-down-enable" title="向下翻页"></div>

            </div>

            <div id="sideCatalog-catalog">

                <dl style="width:175px;zoom:1">

                    <dd id="sideToolbar-item-0-1" class="sideCatalog-item2 heightlight">

                        <span class="sideCatalog-index1">1</span>

                        <a class="nslog:1026" onclick="return false;" title="part1" href="#1">part1</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-2" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">2</span>

                        <a class="nslog:1026" onclick="return false;" title="part2" href="#2">part2</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-2-1" class="sideCatalog-item2">

                        <span class="sideCatalog-index1">2-1</span>

                        <a class="nslog:1026" onclick="return false;" title="part2" href="#2-1">part2-1</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-2-2" class="sideCatalog-item2">

                        <span class="sideCatalog-index1">2-2</span>

                        <a class="nslog:1026" onclick="return false;" title="part2" href="#2-2">part2-2</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-3" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">3</span>

                        <a class="nslog:1026" onclick="return false;" title="part3" href="#3">part3</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-4" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">4</span>

                        <a class="nslog:1026" onclick="return false;" title="part4" href="#4">part4</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-5" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">5</span>

                        <a class="nslog:1026" onclick="return false;" title="part5" href="#5">part5</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-6" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">6</span>

                        <a class="nslog:1026" onclick="return false;" title="part6" href="#6">part6</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-7" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">7</span>

                        <a class="nslog:1026" onclick="return false;" title="part7" href="#7">part7</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-8" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">8</span>

                        <a class="nslog:1026" onclick="return false;" title="part8" href="#8">part8</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-9" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">9</span>

                        <a class="nslog:1026" onclick="return false;" title="part9" href="#9">part9</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-10" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">10</span>

                        <a class="nslog:1026" onclick="return false;" title="part10" href="#10">part10</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-11" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">11</span>

                        <a class="nslog:1026" onclick="return false;" title="part11" href="#11">part11</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-12" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">12</span>

                        <a class="nslog:1026" onclick="return false;" title="part12" href="#12">part12</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-13" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">13</span>

                        <a class="nslog:1026" onclick="return false;" title="part13" href="#13">part13</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-14" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">14</span>

                        <a class="nslog:1026" onclick="return false;" title="part14" href="#14">part14</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                    <dd id="sideToolbar-item-0-15" class="sideCatalog-item1">

                        <span class="sideCatalog-index1">15</span>

                        <a class="nslog:1026" onclick="return false;" title="part15" href="#15">part15</a>

                        <span class="sideCatalog-dot"></span>

                    </dd>

                </dl>

            </div>

        </div>

        <a id="sideCatalogBtn" class="" style="visibility: visible;" href="javascript:void(0);"></a>

        <a id="sideToolbar-up" style="visibility: visible;" title="返回顶部" href="javascript:void(0)"></a>

    </div>

</div>

</div>

<script type="text/javascript" src="../jquery-1.7.2.js"></script>

<script>

    var slideInnerHeight = $('#sideCatalog-catalog dl').height();

    var slideOutHeight = $('#sideCatalog-catalog').height();

    var enableTop = slideInnerHeight - slideOutHeight;

    var step = 50;

    //点击向上的按钮

    $('#sideCatalog-down').bind('click', function () {

        if ($(this).hasClass('sideCatalog-down-enable')) {

            if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {

                $('#sideCatalog-catalog dl').stop().animate({'top': '-=' + step}, 'fast');

                $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');

            } else {

                $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');

                $(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');

            }

        } else {

            return false;

        }

    })

    //点击向下的按钮

    $('#sideCatalog-up').bind('click', function () {

        if ($(this).hasClass('sideCatalog-up-enable')) {

            if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {

                $('#sideCatalog-catalog dl').stop().animate({'top': '+=' + step}, 'fast');

                $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');

            } else {

                $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');

                $(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');

            }

        } else {

            return false;

        }

    })
    //点击导航中的各个目录

    $('#sideCatalog-catalog dl').delegate('dd', 'click', function (e) {

        var index = $(this).index();

        scrollSlide($(this), index);

        var ddId = $(this).find('a').stop().attr('href').substring(1);

        var windowTop = $('a[name="' + ddId + '"]').offset().top;

        $('body,html').animate({scrollTop: windowTop}, 'fast');

        $(this).addClass('heightlight').siblings('dd').removeClass('heightlight');

    })
    //滚动页面，即滚动条滚动

    $(document).scroll(function () {

        var len = $('.headline-1').length;

        for (var i=len-1; i>=0; i--) {

            if ($(this).scrollTop() >= $('.headline-1').eq(i).offset().top - $('.headline-1').eq(i).height()) {

                var index = i;

                $('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').siblings('dd').removeClass('heightlight');

                scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);

                return false;

            } else {

                $('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');

            }

        }

    })
    //导航的滚动，以及向上，向下按钮的显示隐藏

    function scrollSlide(that, index){

        if (index < 5) {

            $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');

            $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');

            $('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');

        } else if (index > 11) {

            $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');

            $('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');

            $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');

        } else {

            var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) + slideOutHeight / 2 - (that.offset().top - $(document).scrollTop());

            $('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');

            $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');

            $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');

        }

    }

</script>

</body>

</html>

大站就是有大站的风范，很多效果还都是他们先开始制作使用，小伙伴们可以经常去逛逛，很容易发现些好东西

jQuery+css实现百度百科的页面导航效果

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
js实现进度条的方法
Feb 13 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 #Javascript
javascript进行四舍五入方法汇总
Dec 16 #Javascript
javascript 判断整数方法分享
Dec 16 #Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 #Javascript
jquery队列函数用法实例
Dec 16 #Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 #Javascript
jQuery实现数字加减效果汇总
Dec 16 #Javascript
有序排列(1) 经纬度(1) 遍历文件夹(1) ctypes(1) html标准库(1) Anaconda(2) C/C++(1) python-pcl(1) dll(1) 历史记录(1)
You might like
使用swoole扩展php websocket示例
2014/02/13 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
jquery动画2.元素坐标动画效果（创建一个图片走廊）
2012/08/24 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JS中递归函数
2016/06/17 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
美国婴儿用品店：Babies”R”Us
2017/10/12 全球购物
《曹刿论战》教学反思
2014/03/02 职场文书
读群众路线心得体会
2014/03/07 职场文书
商务英语专业求职信
2014/06/26 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers