首页
所有分类
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 相关文章推荐
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
js实现多图左右切换功能
Aug 04 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
详解vue项目中实现图片裁剪功能
Jun 07 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) 电子管(5) ETON(1) R601SW(1) 接收机(2) DSP(2) 矿石收音机(1) S900(1) E1-XM(1)
You might like
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
Mysql数据库操作类( 1127版，提供源码下载 )
2010/12/02 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP面向对象精要总结
2014/11/07 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些？
2012/01/08 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Python语言生成水仙花数代码示例
2017/12/18 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Python 装饰器@，对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python二维键值数组生成转json的例子
2019/12/06 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
详解Python中第三方库Faker
2020/09/25 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
python向xls写入数据(包括合并，边框，对齐，列宽）
2021/02/02 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
2015年保送生自荐信
2015/03/24 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
小学生教师节广播稿
2015/08/19 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
奥特曼十大神器：奥特手镯在榜，第一是贝利亚的神器
2022/03/18 日漫