如何操作滚动条时间,实现文档摘要

html:

<div class="mg menu">
        <div>
            <ul>
                <li><a href="#model" class="">vue的学习</a></li>
                <li><a href="#course">node的学习</a></li>
                <li><a href="#introduce">js的学习</a></li>
            </ul>
        </div>
    </div>
    <div class="mg content">
        <div class="module">
            <div class="title" id="model">
                <b>vue的学习</b>
            </div>
            <p>1111111111111111hhhhhhhh</p>
            <p>222222222222222222</p>
            <p>3333333333333333333</p>
            <p>444444444444444444</p>
             <!-- 省略以下代码 -->
        </div>
        <div class="module">
            <div class="title" id="course">
                <b>node的学习</b>
            </div>
            <p>node11111111111111</p>
            <p>node2222222222222222</p>
           <!-- 省略以下代码 -->
        </div>
        <div class="module">
            <div class="title" id="introduce">
                <b>js的学习</b>
            </div>
            <p>js的学习js的学习</p>
            <p>js的学习js的学习</p>
             <!-- 省略以下代码 -->
        </div>
    </div>        

css: 样式随便写一下

.menu{
    width: 200px;
    float: left;
    text-align: center;
    position: fixed;
}
    .menu ul li a{
        width: 190px;
        height: 30px;
        line-height: 30px;
        display: block;
        text-decoration: none;
    }
    .selected{
        background-color: #000;
    }
    .selected a{
        color: #fff;
    }
.content{
    width: 900px;
    float: right;
}

js:

    $(function(){
        $(".menu li").eq(0).addClass(‘selected‘);
        $(".menu li").click(function(){
            // 当前选择的添加样式,同级的删除样式
            $(this).addClass(‘selected‘).siblings(‘li‘).removeClass(‘selected‘);
        });
        var modules = $(".module");//所有的模块
        $(window).scroll(function(){
            var _height = 0; //默认高度
            var _srcTop = $(this).scrollTop();//滚动条与页面的距离
            for(var i = 0; i < modules.length; i++){
                _height += modules[i].offsetHeight;
                if(_srcTop < _height){
                    $(".menu li").eq(i).addClass(‘selected‘).siblings(‘li‘).removeClass(‘selected‘);
                    break;//满足条件后终止循环
                }
            }
        })
    })
时间: 2024-10-11 06:38:35

如何操作滚动条时间,实现文档摘要的相关文章

自动文档摘要技术简介

自动摘要生成技术,尤其是多文档摘要的研究目前来说一直深受关注.从定义上来说,多文档摘要就是将同一主题下的多个文本描述的主要信息按压缩比提炼出一个文本的自然语言处理技术.从应用上来说,一方面,在互联网上使用搜索引擎时候,搜索同一主题的文档往往会返回成千上万的网页,如果将这些网页形成一个统一的.精炼的.能够反映主要信息的摘要必然具有重要的意义.另一方面,对于互联网上某一新闻单位针对同一事件的报道会很多,如果能从这些相关性很强的报道中提炼出一个覆盖性强.形式简洁的摘要也同样具有重要意义.这两个就是自动

文档摘要自动提取算法——抽取式

文档摘要自动提取算法--抽取式 自动提取文档摘要的算法,主流方法分为两类:Extractive 抽取式.Abstractive 概要式.这篇我们主要将抽取式. 抽取式: 从原始文档集中抽取一些具有代表性的文本片段构成摘要,这些片段可以是整个文档中的句子.子句.段落或者小节. 抽取式方法有两个问题,如何对文本单元排序打分:如何抽取文本单元的一个子集生成摘要.分别对应着排序单元和抽取单元. 通俗讲就是,先用排序单元把文档中的单元排序,选择排名靠前的单元,再用抽取单元去除选出来的单元之间的冗余信息,得

自动文档摘要评价方法

自动文档摘要评价方法大致分为两类: (1)内部评价方法(Intrinsic Methods):提供参考摘要,以参考摘要为基准评价系统摘要的质量.系统摘要与参考摘要越吻合, 质量越高. (2)外部评价方法(Extrinsic Methods):不提供参考摘要,利用文档摘要代替原文档执行某个文档相关的应用.例如:文档检索.文档聚类.文档分类等, 能够提高应用性能的摘要被认为是质量好的摘要. 一.Edmundson: Edmundson评价方法比较简单,可以客观评估,就是通过比较机械文摘(自动文摘系统

利用POI操作不同版本word文档中的图片以及创建word文档

我们都知道要想利用java对office操作最常用的技术就应该是POI了,在这里本人就不多说究竟POI是什么和怎么用了.先说本人遇到的问题,不同于利用POI去向word文档以及excel文档去写入数据和向外导出数据并且保存到数据库中这些类似的操作,由于业务上的需要需要利用POI去读取word中的图片,并且去把图片去保存为一个file文件.查了Apache公司提供的api帮助文档,再网友的一些线索,本人也总结了几中对不同word版本(.doc或者是.docx结尾)对于文件中所含图片的操作方式,希望

利用POI操作不同版本号word文档中的图片以及创建word文档

我们都知道要想利用java对office操作最经常使用的技术就应该是POI了,在这里本人就不多说到底POI是什么和怎么用了. 先说本人遇到的问题,不同于利用POI去向word文档以及excel文档去写入数据和向外导出数据而且保存到数据库中这些类似的操作,因为业务上的须要须要利用POI去读取word中的图片,而且去把图片去保存为一个file文件.查了Apache公司提供的api帮助文档,再网友的一些线索,本人也总结了几中对不同word版本号(.doc或者是.docx结尾)对于文件里所含图片的操作方

日期时间插件--日期时间组件文档 - layui.laydate

官方文档:http://www.layui.com/doc/modules/laydate.html 样式: <body> <div> <input placeholder="开始时间" id="LAY_start_time" name="startTime"type="text"readonly/> <input placeholder="截止时间" id=&qu

mysql文档摘要续2

mysql优化续: 1:show index from table_name查看索引使用情况其中cardinality基数,即value group索引区分度,当cardinality越小时需要扫描的行数越多,越大是则越小. 2:mysql评价索引扫描数据量非常大时可能会放弃使用,当使用limit时,情况可以改变,mysql会采用索引 3:针对mysql的行格式row format.innodb最新版本采用COMPACT,老版本是REDUNDANT,使用新的格式或减少20%的磁盘空间,相应的会增

mysql文档摘要续

以下是阅读mysql官方文档6-10章的笔记: mysql的权限设置:存储于mysql数据库包含一下表 1.user 最主要的权限设置表,所有的账户,全局权限 2.db 数据库层面的权限设置 3.tables_priv 数据表层面的权限设置 4.colums_priv 行级层面的权限设置 5.proc_priv 存储过程.函数的权限设置 mysql的权限验证一般先检查user表如果通过则授权,没有则继续db表,如果通过则添加到user表,并授权,延续以上规则... mysql一般在启动时将所有的

工具类封装(时间转换,文档读写)

时间处理: import java.util.Date; import java.text.ParseException; import java.text.SimpleDateFormat; public class DateTool{ /** * 将日期(中式)转换成String(毫秒) * @param date * @param pattern * @return */ public static String dateToString(Date date,String pattern)