<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. sqlserver 对字符串的SUM

    select id,keyword ,max(Confidence) as confidence, TimeRange=stuff((select ','+rtrim(begintime)+'-'+r ...

  2. Android framework完整源码下载

    包括cpp等native代码.可zip打包下载. https://github.com/android/platform_frameworks_base/branches/stale Android线 ...

  3. android 学习第一天 了解事件机制，页面跳转等常用操作

    点击时间2种 第一种,通过初始化页面 写入点击事件 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedI ...

  4. Async Programming - 1 async-await 糖的本质（2）

    上一篇讲了这么多,其实说的就是一个事,return会被编译器重写成SetResult,所以如果我们的异步函数返回的是一个Task<int>,代码就要改成这样: using System; ...

  5. java 事件监听 - 键盘

    java 事件监听 - 键盘 //事件监听 //键盘事件监听,写了一个小案例,按上下左右,改变圆形的位置,圆形可以移动 import java.awt.*; import javax.swing.*; ...

  6. 转 strace

    转自http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.html strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Li ...

  7. 最短路模板（Dijkstra & Dijkstra算法+堆优化 & bellman_ford & 单源最短路SPFA）

    关于几个的区别和联系:http://www.cnblogs.com/zswbky/p/5432353.html d.每组的第一行是三个整数T,S和D,表示有T条路,和草儿家相邻的城市的有S个(草儿家到 ...

  8. Windows Server 2012重复数据删除技术体验

    在企业环境中,对磁盘空间的需求是惊人的.数据备份.文件服务器.软件镜像.虚拟磁盘等都需要占据大量的空间.对此,微软在Windows Server 2012中引入了重复数据删除技术.重复数据删除技术通过 ...

  9. 在 Arch Linux 玩百度 Flash 战曲游戏乱码

    #!/bin/sh #From: http://hi.baidu.com/imtinge/item/3516761d314481542b3e22f0 #Info: CJK Unicode font M ...

  10. Struts2：上传下载

    ud_upload.jsp <s:form action="fileupload" enctype="multipart/form-data"> & ...