<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. SSIS 文件系统任务无法使用变量配置目标路径

    SSIS 文件系统任务无法使用变量配置目标路径 需求: 在SSIS2012中,某个从平面文件导入数据的包中,需要把处理出错的文件拷贝到一个专门的文件夹,便于管理人员及时处理. 问题描述: 1. 在包参 ...

  2. EXCEL日期间隔函数

    =DATEDIF(D3,TODAY(),"M") 日期一列有逗点,有横线,excel建议日期用横杠. 首先将日期列选择日期格式. 其次通过查找替换,将.换为- 之后用=DATEDI ...

  3. CDC和HDC的区别与转换

    CDC和HDC的区别与转换 一.区别与联系HDC是句柄:CDC是MFC封装的Windows   设备相关的一个类:CClientDC是CDC的衍生类,产生对应于Windows客户区的对象HDC是WIN ...

  4. 转 listener.log文件过大导致oracle数据库连接非常慢

    数据库(31)  最近发现oracle数据库连接非常慢,sqlplus很快,用客户端就很慢,甚至会无响应. 然后服务器内存一下就飙升到了90%,不是表空间占满了,也不是数据库连接数占满了.重启还是一样 ...

  5. win8安装SQL Server2008企业版

    win8 系统,安装的时候要先安装SQL Server2008企业版 再安装Visual studio2010,不然SQL Server会有问题.

  6. OAF_开发系列12_实现OAF开发中URL中的标记和加密参数传递（案例）

    20150712 Created By BaoXinjian

  7. composer.json：项目安装！！！！！！！！！！

    基本用法 基本用法 安装 composer.json:项目安装 关于 require Key 包名称 包版本 下一个重要版本(波浪号运算符) 稳定性 安装依赖包 composer.lock - 锁文件 ...

  8. 使用JavaScript的Join方法

    在本例中,我们将创建一个数组,然后把它的所有元素放入一个字符串: <script type="text/javascript"> var arr = new Array ...

  9. 三种Singleton的实现方式

    来源:http://melin.iteye.com/blog/838258 三种Singleton的实现方式,一种是用大家熟悉的DCL,另外两种使用cas特性来实现. public class Laz ...

  10. python Queue模块

    先看一个很简单的例子 #coding:utf8 import Queue #queue是队列的意思 q=Queue.Queue(maxsize=10) #创建一个queue对象 for i in ra ...