<html><head><title>jquery实现章节目录效果</title>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

<style>

body{background-attachment:fixed;background-image:url(about:blank)}/*修正IE6下浮动层闪动*/

#anchor{position:fixed;top:150px;right:0px;border:solid 1px black;}

#anchor.fixie6{position:absolute;top:expression(eval(document.documentElement.scrollTop)+150);}

#anchor a{text-decoration:none;color:blue;}

#anchor a.focus{background:red;color:white;}

</style>

<script>

    if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.fixIE6= true<\/script><![endif]-->');//增加是否为IE6的判断

    window.onload = function () {

        var strict = document.compatMode == 'CSS1Compat', contents = $('div>a[name]:first-child'), anchors, s = [];

        contents.each(function () { s[s.length] = '<a href="#' + this.name + '">' + this.name + '</a>'; });

        anchors = $('<div id="anchor"' + (window.fixIE6 ? ' class="fixie6"' : '') + '>' + s.join('<br>') + '</div>').appendTo(document.body).find('a'); //添加文章的章节目录

        contents = contents.parent(); //更新章节锚点为内容节点

        //计算内容节点的上端点和下端点

        contents.each(function () { var o = $(this); o.data('top-bottom', { top: o.offset().top, bottom: o.offset().top + o.height() }); });

        $(window).scroll(function () {

            var viewTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop); //可见高度顶部

            var viewBottom = document[strict ? 'documentElement' : 'body'].clientHeight + viewTop; //可见高度底部

            contents.each(function (index, el) {

                var tb = $(this).data('top-bottom');

                if ((tb.top > viewTop && tb.top < viewBottom) || (tb.bottom > viewTop && tb.bottom < viewBottom) || (tb.top < viewTop && tb.bottom > viewBottom))

                    anchors.eq(index).addClass('focus');

                else

                    anchors.eq(index).removeClass('focus');

            }).trigger('scroll');

        });

    };

</script>

</head><body><div style="height:800px"><a name="anchor1">anchor1</a></div>

<div style="height:800px"><a name="anchor2">anchor2</a></div>

<div style="height:800px"><a name="anchor3">anchor3</a></div>

<div style="height:800px"><a name="anchor4">anchor4</a></div><div id="anchor"><a href="#anchor1" class="focus">anchor1</a><br><a href="#anchor2" class="focus">anchor2</a><br><a href="#anchor3" class="">anchor3</a><br><a href="#anchor4" class="">anchor4</a></div></body></html>

jquery实现章节目录效果的更多相关文章

  1. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  2. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  3. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  4. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  5. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  8. Duilib实现类似电脑管家扫描目录效果

    实现原理: 1.后台开线程遍历目录,遍历出一个文件路径在界面上更新显示(通过发消息通知主界面) 2.需要扩展一下Duilib控件,在此我扩展了CLabelUI,重写了PaintText函数 扩展控件的 ...

  9. jQuery实现模拟滚动条效果；

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

随机推荐

  1. 《Javascript高级程序设计第3版》精华总结

    一.JavaScript简介   1.1 javascript简史 1.2 javascript实现 + javascript是一种专为网页交互而设计的一种脚本语言,javascript由三大部分组成 ...

  2. android安装busybox

    大家是否有过这样的经历,在命令行里输入adb shell,然后使用命令操作你的手机或模拟器,但是那些命令都是常见Linux命令的阉割缩水版,用起来很不爽.是否想过在Android上使用较完整的shel ...

  3. SQL分页查询

    假如tb_customer表中的数据量非常大,在显示时要分页显示而且每页只显示10条信息.为了效果我们取第三页的数据. 方法一:遍历两次表,取不同的数据. select top 10 * from t ...

  4. 【zz】MIT牛人解说数学体系

    作者:林达华 一.为什么要深入数学的世界 作为计算机的学生,我(原作者)没有任何企图要成为一个数学家.我学习数学的目 的,是要想爬上巨人的肩膀,希望站在更高的高度,能把我自己研究的东西看得更深广一些. ...

  5. 自身对highcharts理解

    最近公司要求做一些图标,动态的添加数据,展示在手机上,以前对Echarts,d3,highcharts只是听说,也没实际去花一定的时间玩玩,也是自以为是,不就看看api的事,结果呢?-----被他们给 ...

  6. 深入详解DataTable

    在学习DataTable知识之前,我们有必要了解下ADO.NET.以下摘自MSDN: ADO.NET 对 Microsoft SQL Server 和 XML 等数据源以及通过 OLE DB 和 XM ...

  7. 扩展ValidationAttribute 1

    MVC中经常会用一些服务端对Model的验证. 服务端验证要继承自ValidationAttribute,并重写IsValid虚方法来自定义自己的验证规则. protected override Va ...

  8. 功能强大的web打印控件lodop的使用

    打印是很多web系统都需要的功能,最近找到一款功能强大,使用简单,价格便宜的web打印工具Lodop,免费也能用,不过有水印,也不贵商业开发建议购买. 废话不多说,拿来就用,从简单的打印开始. 1.下 ...

  9. caffe.exe (caffe.bin)用法回顾

    caffe.bin :command line brew usage : caffe  <command><args> commands: train:  训练或者微调一个网络 ...

  10. Python IDE PyCharm的基本快捷键和配置简介

    快捷键 1.编辑(Editing)Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctr ...