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>

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

(0)

相关推荐

  • python采集百度百科的方法

    本文实例讲述了python采集百度百科的方法.分享给大家供大家参考.具体如下: #!/usr/bin/python # -*- coding: utf-8 -*- #encoding=utf-8 #Filename:get_baike.py import urllib2,re import sys def getHtml(url,time=10): response = urllib2.urlopen(url,timeout=time) html = response.read() respon

  • jquery仿百度百科底部浮动导航特效

    jquery类似百度百科底部导航预览,代码很简单,这里就不多废话了. 效果图: CSS * { margin: 0; padding: 0 } .wrap { width: 1000px; overflow: hidden; margin: 0 auto; } .content { width: 780px; float: left; } .slide { width: 200px; float: right; } HTML <div class="wrap"> <d

  • 基于Jquery实现仿百度百科右侧导航代码附源码下载

    先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示  源码下载 代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候

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

    这周不小心看到了百度百科的页面导航效果,感觉挺不错的,周末抽空写了下. 下图为导航部分的效果图: css和图片都是抄百度的,可从百度百科下载. 具体的代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head>     <title></title>     <meta charset="utf-8">     <link rel="stylesheet"

  • jQuery仿写百度百科的目录树

    一.首先来看一下需求(截图为百度百科"医保"词条): 1.点击右侧的目录树,左侧跳转到指定的锚点位置: 2.滚动鼠标,游标跟随一起滚动至响应链接位置 二.实现思路 1.针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可: 2.针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天

  • jQuery+css实现的蓝色水平二级导航菜单效果代码

    本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • jQuery+CSS实现的网页二级下滑菜单效果

    本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果和菜单下滑效果和渐变效果已经做出来了,在IE下表现不错,在火狐下发现菜单有闪烁现象,有空会继续修正,感谢大家捧场哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/ 具体

  • jQuery实现的简洁下拉菜单导航效果代码

    本文实例讲述了jQuery实现的简洁下拉菜单导航效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现简洁下拉菜单导航效果,代码规范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+.简洁明快的jquery网站菜单,请参阅代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-down-show-menu-nav-codes/ 具体代码

  • 如何使用jQuery技术开发ios风格的页面导航菜单

    效果图: 目前市场上越来越流行IOS风格的操作系统和导航方式,在今天的jQuery教程中,我们介绍如何生成一个iphone风格的菜单导航. HTML代码 我们使用镶嵌的<li>来生成菜单内容,并且包含在<nav>标签中,如下: <nav> <h1>导航菜单</h1> <ul> <li> <h2>专题教程</h2> <ul> <li> <h3>HTML专题教程<

  • jQuery实现div浮动层跟随页面滚动效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery滚动监听实现商城楼梯式导航效果

    话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu

随机推荐