<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. HTML5 History API实现无刷新跳转

    在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...

  2. Nginx常用日志分割方法

    方式一: nginx cronolog日志分割配置文档,根据下面方法,每分钟分割一次NGINX访问日志. 1.nginx日志配置 access_log /var/log/nginx/access.lo ...

  3. maven scope含义的说明

    依赖范围控制哪些依赖在哪些classpath 中可用,哪些依赖包含在一个应用中.让我们详细看一下每一种范围: compile (编译范围) compile是默认的范围:如果没有提供一个范围,那该依赖的 ...

  4. 04 Linux字符设备驱动

    一.结构体 1. cdev 结构体 struct cdev { struct kobject kobj; /* 内嵌的 kobject 对象 */ struct module *owner; /*所属 ...

  5. eclipse项目debug方法

    属性查看代码在哪里存 本地项目启动 1,2步骤需要success

  6. Silverlight 缓存控制策略

    通常我们用html或asp.net页面承载Silverlight包,由于浏览器缓存机制的存在,使得你的应用更新时,客户见到往往是旧版的程序,而完全禁止缓存,每次打开页面都要重新下载xap,对于体积较大 ...

  7. Java 对象，数组 与 JSON 字符串 相互转化

    当 Java 对象中包含 数组集合对象时,将 JSON 字符串转成此对象. public class Cart{} public class MemberCoupon{} public class C ...

  8. sqlserver2000 在查询时产生序号列的办法

    用的是数据库sqlserver2000,唉,有点老了,好处是到处都有,安装方便. select ( select count(*) from temp_gzsphzb as t1 where spid ...

  9. Mysql使用workbench迁移数据

    原文:http://jingyan.baidu.com/article/925f8cb8f3ec25c0dce05644.html 打开Mysql WorkBench,连接到数据库: 首先选中:Man ...

  10. Burp SuiteBurp Suite使用详解

    http://www.2cto.com/Article/201209/153312.html Burp Suite是Web应用程序测试的最佳工具之一,其多种功能可以帮我们执行各种任务.请求的拦截和修改 ...