root
/
myBlogs_2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953
							
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>常用功能收集 · 代码收集</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.1.1">
        
        
    <link rel="stylesheet" href="../../gitbook/style.css">

    
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search-pro/search.css">
                
            
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="../../angular/study_notes/" />
    
    
    <link rel="prev" href="04.html" />
    

    </head>
    <body>
        
<div class="gb-page-wrapper">
    <header class="gb-page-header">
        <div class="container">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>


            <a href="../.." class="logo">
                <img src="../../gitbook/images/logo/128.png">
                <h1>代码收集</h1>
            </a>

            
<a href="https://github.com/seamong/myBlogs/blob/doc/JavaScript/cases/05.md" target="_blank" class="btn btn-link pull-right hidden-xs">
    <i class="octicon octicon-mark-github"></i> 在GitHub编辑本页
</a>
<a href="../../faq.md" class="btn btn-link pull-right hidden-xs">
    F.A.Q
</a>
<a href="https://github.com/seamong/myBlogs/README.md" target="_blank" class="btn btn-link pull-right hidden-xs">
    当前版本0.0.1
</a>

        
        </div>
    </header>

    <div class="gb-page-body">
        <div class="gb-page-inner">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        

    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">介绍</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../" class="list-group-item ">
        

            关于本文档

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">JavaScript</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../principle/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            原理解析

        
        </a>
        

        <a href="./" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down"></i>
            

            案例解析

        
        </a>
        

        <a href="0.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            动态替换图片

        
        </a>
        

        <a href="01.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            原生Ajax学习

        
        </a>
        

        <a href="02.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            React/React Native 的ES5 ES6写法对照表

        
        </a>
        

        <a href="03.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            战舰游戏

        
        </a>
        

        <a href="04.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            正则截取指定字符串

        
        </a>
        

        <a href="05.html" class="list-group-item active">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            常用功能收集

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">angular</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../angular/study_notes/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            Study notes

        
        </a>
        

        <a href="../../angular/ng.html" class="list-group-item ">
        

            ng

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">css</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../css/principle/" class="list-group-item ">
        

            原理解析

        
        </a>
        

        <a href="../../css/cases/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            案例收集

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">vue</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../vue/components/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            components

        
        </a>
        

        <a href="../../vue/router/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            router

        
        </a>
        

        <a href="../../vue/vuex/" class="list-group-item ">
        

            VUE

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">ubuntu</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../ubuntu/serves/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            服务器生存指南

        
        </a>
        

        <a href="../../ubuntu/instruction.html" class="list-group-item ">
        

            常用指令

        
        </a>
        

        <a href="../../ubuntu/software/" class="list-group-item ">
        

            常用软件安装

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">GIT</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../git/git.html" class="list-group-item ">
        

            git 命令

        
        </a>
        

        <a href="../../git/push.html" class="list-group-item ">
        

            git~push

        
        </a>
        

        <a href="../../git/faq.html" class="list-group-item ">
        

            git~F.A.Q

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">NODE&NPM</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../node/0.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            node

        
        </a>
        

        <a href="../../node/npm/0.html" class="list-group-item ">
        

            npm

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        

        <div class="list-group">
            
    
        <a href="../../other/faq.html" class="list-group-item ">
        

            FAQ

        
        </a>
        

        <a href="../../other/examples.html" class="list-group-item ">
        

            Examples

        
        </a>
        

        </div>
    </div>
    

                    </div>
                    <div class="col-md-9">
                        
<div id="book-search-results">
    <div class="search-noresults">
    
                            
                            <div class="gb-markdown book-page-inner">
                                <h1 id="&#x5E38;&#x7528;&#x529F;&#x80FD;&#x6536;&#x96C6;">&#x5E38;&#x7528;&#x529F;&#x80FD;&#x6536;&#x96C6;</h1>
<h4 id="&#x6D4F;&#x89C8;&#x5668;&#x57FA;&#x672C;&#x4FE1;&#x606F;&#x5224;&#x65AD;">&#x6D4F;&#x89C8;&#x5668;&#x57FA;&#x672C;&#x4FE1;&#x606F;&#x5224;&#x65AD;</h4>
<pre><code class="lang-javascript">  <span class="hljs-comment">/*
  * &#x667A;&#x80FD;&#x673A;&#x6D4F;&#x89C8;&#x5668;&#x7248;&#x672C;&#x4FE1;&#x606F;:
  *
  */</span>
  <span class="hljs-keyword">var</span> browser = {
    versions: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">var</span> u = navigator.userAgent, app = navigator.appVersion;
      <span class="hljs-built_in">console</span>.log(u);
      <span class="hljs-keyword">return</span> {<span class="hljs-comment">//&#x79FB;&#x52A8;&#x7EC8;&#x7AEF;&#x6D4F;&#x89C8;&#x5668;&#x7248;&#x672C;&#x4FE1;&#x606F;</span>
        trident: u.indexOf(<span class="hljs-string">&apos;Trident&apos;</span>) &gt; <span class="hljs-number">-1</span>, <span class="hljs-comment">//IE&#x5185;&#x6838;</span>
        presto: u.indexOf(<span class="hljs-string">&apos;Presto&apos;</span>) &gt; <span class="hljs-number">-1</span>, <span class="hljs-comment">//opera&#x5185;&#x6838;</span>
        webKit: u.indexOf(<span class="hljs-string">&apos;AppleWebKit&apos;</span>) &gt; <span class="hljs-number">-1</span>, <span class="hljs-comment">//&#x82F9;&#x679C;&#x3001;&#x8C37;&#x6B4C;&#x5185;&#x6838;</span>
        gecko: u.indexOf(<span class="hljs-string">&apos;Gecko&apos;</span>) &gt; <span class="hljs-number">-1</span> &amp;&amp; u.indexOf(<span class="hljs-string">&apos;KHTML&apos;</span>) == <span class="hljs-number">-1</span>, <span class="hljs-comment">//&#x706B;&#x72D0;&#x5185;&#x6838;</span>
        mobile: !!u.match(<span class="hljs-regexp">/Mobile/g</span>), <span class="hljs-comment">//&#x53BB;&#x6389;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x5224;&#x65AD;</span>
<span class="hljs-comment">//        mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //&#x662F;&#x5426;&#x4E3A;&#x79FB;&#x52A8;&#x7EC8;&#x7AEF;</span>
        ios: !!u.match(<span class="hljs-regexp">/\(i[^;]+;( U;)? CPU.+Mac OS X/</span>), <span class="hljs-comment">//ios&#x7EC8;&#x7AEF;</span>
        android: u.indexOf(<span class="hljs-string">&apos;Android&apos;</span>) &gt; <span class="hljs-number">-1</span> || u.indexOf(<span class="hljs-string">&apos;Linux&apos;</span>) &gt; <span class="hljs-number">-1</span>, <span class="hljs-comment">//android&#x7EC8;&#x7AEF;&#x6216;&#x8005;uc&#x6D4F;&#x89C8;&#x5668;</span>
        iPhone: u.indexOf(<span class="hljs-string">&apos;iPhone&apos;</span>) &gt; <span class="hljs-number">-1</span> || u.indexOf(<span class="hljs-string">&apos;Mac&apos;</span>) &gt; <span class="hljs-number">-1</span>, <span class="hljs-comment">//&#x662F;&#x5426;&#x4E3A;iPhone&#x6216;&#x8005;QQHD&#x6D4F;&#x89C8;&#x5668;</span>
        iPad: u.indexOf(<span class="hljs-string">&apos;iPad&apos;</span>) &gt; <span class="hljs-number">-1</span>, <span class="hljs-comment">//&#x662F;&#x5426;iPad</span>
        webApp: u.indexOf(<span class="hljs-string">&apos;Safari&apos;</span>) == <span class="hljs-number">-1</span> <span class="hljs-comment">//&#x662F;&#x5426;web&#x5E94;&#x8BE5;&#x7A0B;&#x5E8F;&#xFF0C;&#x6CA1;&#x6709;&#x5934;&#x90E8;&#x4E0E;&#x5E95;&#x90E8;</span>
      };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
  }
  <span class="hljs-built_in">document</span>.writeln(<span class="hljs-string">&quot;&#x8BED;&#x8A00;&#x7248;&#x672C;: &quot;</span> + browser.language);
  <span class="hljs-built_in">document</span>.writeln(<span class="hljs-string">&quot; &#x662F;&#x5426;&#x4E3A;&#x79FB;&#x52A8;&#x7EC8;&#x7AEF;: &quot;</span> + browser.versions.mobile);
  <span class="hljs-built_in">document</span>.writeln(<span class="hljs-string">&quot; &#x662F;&#x5426;&#x4E3A;webKit: &quot;</span> + browser.versions.webKit);
  <span class="hljs-built_in">document</span>.writeln(<span class="hljs-string">&quot; ios&#x7EC8;&#x7AEF;: &quot;</span> + browser.versions.ios);
  <span class="hljs-built_in">document</span>.writeln(<span class="hljs-string">&quot; android&#x7EC8;&#x7AEF;: &quot;</span> + browser.versions.android);
  <span class="hljs-built_in">document</span>.writeln(<span class="hljs-string">&quot; &#x662F;&#x5426;&#x4E3A;iPhone: &quot;</span> + browser.versions.iPhone);
  <span class="hljs-built_in">document</span>.writeln(<span class="hljs-string">&quot; &#x662F;&#x5426;iPad: &quot;</span> + browser.versions.iPad);
  <span class="hljs-built_in">document</span>.writeln(navigator.userAgent);
</code></pre>
<h4 id="javascriptjquery&#x5224;&#x65AD;&#x5143;&#x7D20;&#x5373;&#x5C06;&#x51FA;&#x73B0;&#x5728;&#x6587;&#x6863;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x6216;&#x6587;&#x6863;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x7684;&#x9876;&#x90E8;">JavaScript|jQuery&#x5224;&#x65AD;&#x5143;&#x7D20;&#x5373;&#x5C06;&#x51FA;&#x73B0;&#x5728;&#x6587;&#x6863;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x6216;&#x6587;&#x6863;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x7684;&#x9876;&#x90E8;</h4>
<pre><code class="lang-javascript"><span class="hljs-comment">/* JavaScript&#x5224;&#x65AD;&#x5143;&#x7D20;&#x5373;&#x5C06;&#x51FA;&#x73B0;&#x5728;&#x6587;&#x6863;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x6216;&#x79BB;&#x5F00;&#x6587;&#x6863;&#x53EF;&#x89C6;&#x533A;&#x57DF;.
&#x4E00;&#x3001;&#x5224;&#x65AD;&#x5143;&#x7D20;&#x662F;&#x5426;&#x5904;&#x4E8E;&#x53EF;&#x89C6;&#x6587;&#x6863;&#x533A;&#x57DF;&#x9876;&#x90E8;
&#x5224;&#x65AD;&#x6761;&#x4EF6;:DOMTop.offsetTop + clientHeight - 10 &lt; clientHeight + scrollTop
&#x89E3;&#x6790;:
  &#x83B7;&#x53D6;&#x5143;&#x7D20;&#x8DDD;&#x79BB;&#x6587;&#x6863;&#x9876;&#x7AEF;&#x7684;&#x957F;&#x5EA6;,&#x7136;&#x540E;&#x4E0E;&#x7A97;&#x53E3;&#x7684;&#x9AD8;&#x5EA6;&#x76F8;&#x52A0;;
  &#x63A5;&#x7740;,&#x518D;&#x901A;&#x8FC7;&#x83B7;&#x53D6;&#x7A97;&#x53E3;&#x6EDA;&#x52A8;&#x6761;&#x9876;&#x7AEF;&#x4E0E;&#x6587;&#x6863;&#x9876;&#x7AEF;&#x7684;&#x8DDD;&#x79BB;;
  &#x5E76;&#x901A;&#x8FC7;&#x5224;&#x65AD;&#x5F97;&#x5230;&#x5143;&#x7D20;&#x662F;&#x5426;&#x5904;&#x4E8E;,&#x8DDD;&#x79BB;&#x53EF;&#x89C6;&#x6587;&#x6863;&#x533A;&#x57DF;&#x7684;&#x9876;&#x90E8;10&#x4E2A;&#x5355;&#x4F4D;&#x7684;&#x4F4D;&#x7F6E;.
&#x4E8C;&#x3001;&#x5224;&#x65AD;&#x5143;&#x7D20;&#x662F;&#x5426;&#x5373;&#x5C06;&#x51FA;&#x73B0;&#x5728;&#x53EF;&#x89C6;&#x7A97;&#x53E3;&#x7684;&#x5E95;&#x90E8;
&#x5224;&#x65AD;&#x6761;&#x4EF6;:DOMTop.offsetTop -10 &lt; clientHeight + scrollTop
&#x89E3;&#x6790;:&#x57FA;&#x672C;&#x601D;&#x8DEF;&#x540C;&#x4E0A;&#x4E00;&#x81F4;.
 */</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">init</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">var</span> DOMTop = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;box&apos;</span>);
  <span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">&apos;scroll&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">var</span> clientHeight = <span class="hljs-built_in">document</span>.documentElement.clientHeight;
    <span class="hljs-keyword">var</span> scrollTop = <span class="hljs-built_in">document</span>.documentElement.scrollTop;
    <span class="hljs-keyword">if</span> (DOMTop.offsetTop + clientHeight - <span class="hljs-number">10</span> &lt; clientHeight + scrollTop) {
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x53D1;&#x73B0;&#x5143;&#x7D20;&apos;</span>)
    }
  })
}

<span class="hljs-built_in">window</span>.onload = init;
<span class="hljs-comment">// delete init();</span>


<span class="hljs-comment">/*jQuery&#x5224;&#x65AD;&#x5143;&#x7D20;&#x5373;&#x5C06;&#x51FA;&#x73B0;&#x5728;&#x6587;&#x6863;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x6216;&#x79BB;&#x5F00;&#x6587;&#x6863;&#x53EF;&#x89C6;&#x533A;&#x57DF;.
&#x601D;&#x8DEF;&#x540C;&#x4E0A;&#x4E00;&#x81F4;,&#x8868;&#x8FBE;&#x65B9;&#x5F0F;&#x4E0D;&#x540C;
 &#x5F53;&#x5143;&#x7D20;&#x8DDD;&#x79BB;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x8FD8;&#x6709;10&#x7684;&#x957F;&#x5EA6;&#x65F6;,&#x6267;&#x884C;&#x76F8;&#x5173;&#x7A0B;&#x5E8F;*/</span>
<span class="hljs-comment">/*$(document).ready(function () {
  $(window).scroll(function () {
    // console.log($(window).scrollTop() +  $(window).height())
    // &#x6587;&#x6863;&#x8DDD;&#x79BB;&#x5C4F;&#x5E55;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x7684;&#x8DDD;&#x79BB;
    var DOMTop = $(&apos;.box&apos;).offset().top + 10;
    // &#x6587;&#x6863;&#x5DF2;&#x7ECF;&#x6ED1;&#x52A8;&#x7684;&#x8DDD;&#x79BB; + &#x7A97;&#x53E3;&#x7684;&#x9AD8;&#x5EA6;
    var DOMScrollHeight = $(window).scrollTop() +  $(window).height();
    // &#x5143;&#x7D20;&#x8DDD;&#x79BB;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x9876;&#x90E8;&#x8DDD;&#x79BB;&#x4E3A;10&#x7684;&#x65F6;&#x5019;&#x89E6;&#x53D1;
    if (DOMTop &lt; DOMScrollHeight) {
      console.log(&apos;DOMTop&apos; + DOMTop);
      console.log(&apos;DOMScrollHeight&apos; + DOMScrollHeight);
    }
  });
});*/</span>
</code></pre>
<h4 id="&#x5BFC;&#x822A;&#x6761;&#x52A8;&#x753B;&#xFF0C;&#x8BBE;&#x5B9A;">&#x5BFC;&#x822A;&#x6761;&#x52A8;&#x753B;&#xFF0C;&#x8BBE;&#x5B9A;</h4>
<pre><code class="lang-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">navAnimation</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> DOMTop = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;nav&apos;</span>), <span class="hljs-comment">// &#x83B7;&#x53D6;&#x5BFC;&#x822A;&#x5BF9;&#x8C61;</span>
    clientHeight = <span class="hljs-built_in">document</span>.documentElement.clientHeight, <span class="hljs-comment">// &#x83B7;&#x53D6;&#x7A97;&#x53E3;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x9AD8;&#x5EA6;</span>
    tru = <span class="hljs-literal">true</span>,  <span class="hljs-comment">// &#x662F;&#x5426;&#x66FF;&#x6362;&#x7C7B;&#x540D;&#x7684;&#x4F9D;&#x636E;</span>
    clientHeightScrollTop = clientHeight + DOMTop.offsetTop + DOMTop.clientHeight; <span class="hljs-comment">// &#x662F;&#x5426;&#x66FF;&#x6362;&#x7C7B;&#x540D;&#x7684;&#x4F9D;&#x636E;</span>
  <span class="hljs-comment">// &#x76D1;&#x542C;&#x6587;&#x6863;&#x6EDA;&#x52A8;&#x6761;&#x4E8B;&#x4EF6;&#xFF0C;&#x7ED1;&#x5B9A;&#x52A8;&#x753B;</span>
  <span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">&apos;scroll&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">let</span> scrollTop = <span class="hljs-literal">null</span>;
    <span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.body.scrollTop !== <span class="hljs-number">0</span>) {
      scrollTop = <span class="hljs-built_in">document</span>.body.scrollTop
    } <span class="hljs-keyword">else</span> {
      scrollTop = <span class="hljs-built_in">document</span>.documentElement.scrollTop
    }
    <span class="hljs-keyword">if</span> (tru &amp;&amp; clientHeightScrollTop &lt; clientHeight + scrollTop) {
      DOMTop.setAttribute(<span class="hljs-string">&apos;class&apos;</span>, <span class="hljs-string">&apos;page-nav top&apos;</span>);
      tru = <span class="hljs-literal">false</span>
    }
    <span class="hljs-keyword">if</span> (clientHeightScrollTop &gt; clientHeight + scrollTop) {
      DOMTop.setAttribute(<span class="hljs-string">&apos;class&apos;</span>, <span class="hljs-string">&apos;page-nav&apos;</span>);
      tru = <span class="hljs-literal">true</span>
    }
  }, <span class="hljs-literal">false</span>);
}
</code></pre>
<h4 id="&#x951A;&#x94FE;&#x63A5;&#x8DF3;&#x8F6C;&#x8FC7;&#x6E21;">&#x951A;&#x94FE;&#x63A5;&#x8DF3;&#x8F6C;&#x8FC7;&#x6E21;</h4>
<pre><code class="lang-javascript"><span class="hljs-comment">/*
# &#x951A;&#x94FE;&#x63A5;&#x8DF3;&#x8F6C;&#x8FC7;&#x5EA6;
&#x6761;&#x4EF6;&#xFF1A;
  1.&#x76EE;&#x6807;&#x4F4D;&#x7F6E; &amp; &#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E; &#x8DDD;&#x79BB;&#x8FC7;&#x8FD1;
  2.&#x76EE;&#x6807;&#x4F4D;&#x7F6E; &gt; &#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E;
  3.&#x76EE;&#x6807;&#x4F4D;&#x7F6E; &lt; &#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E;
&#x7B56;&#x7565;&#xFF1A;
  1.&#x83B7;&#x53D6;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x7684;&#x5BF9;&#x8C61;&#xFF1B;
  2.&#x4F7F;&#x7528;for&#x5FAA;&#x73AF;&#x8BED;&#x53E5;&#xFF0C;&#x7ED9;&#x83B7;&#x53D6;&#x5230;&#x7684;&#x5BF9;&#x8C61;&#x96C6;&#x5408;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#xFF1B;
  3.window.scrollTo(X,Y); &#x5907;&#x6CE8;&#xFF1A;X=window&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x7684;&#x6EDA;&#x52A8;&#x6761;&#x79FB;&#x52A8;&#x4F4D;&#x7F6E;&#xFF1B;Y=window&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x7684;&#x6EDA;&#x52A8;&#x6761;&#x79FB;&#x52A8;&#x4F4D;&#x7F6E;;
  4.&#x6839;&#x636E;&#x6761;&#x4EF6;&#xFF0C;&#x6267;&#x884C;&#x4E0D;&#x540C;&#x4E8B;&#x4EF6;&#x3002;
  5.&#x83B7;&#x53D6;`&#x76EE;&#x6807;&#x4F4D;&#x7F6E; &amp; &#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E;`&#x7684;&#x95F4;&#x8DDD;&#xFF0C;&#x9664;&#x4EE5;25&#x3002;&#x7136;&#x540E;&#x7528;&#x8BE5;&#x6570;&#x503C;&#x4E0E;`&#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E;`&#x76F8;&#x52A0;&#x6216;&#x76F8;&#x51CF;&#x3002;&#x800C;&#x7D2F;&#x52A0;&#x6216;&#x7D2F;&#x51CF;&#x7684;&#x8FC7;&#x7A0B;&#x901A;&#x8FC7;setInterval()&#x5B9A;&#x65F6;&#x5668;&#x65B9;&#x6CD5;&#x6765;&#x63A7;&#x5236;&#x3002;
  6.&#x7A0B;&#x5E8F;&#x6267;&#x884C;&#x5B8C;&#x6BD5;&#x4E4B;&#x540E;&#xFF0C;&#x7528;clearInterval()&#x65B9;&#x6CD5;&#x6E05;&#x9664;&#x5B9A;&#x65F6;&#x5668;&#x3002;
 */</span>
anchorLinkJumpTransition();

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">anchorLinkJumpTransition</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> aTag = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&apos;.animation-top a&apos;</span>);
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; aTag.length; i++) {
    aTag[i].addEventListener(<span class="hljs-string">&apos;click&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">var</span> $target = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-keyword">this</span>.hash.slice(<span class="hljs-number">1</span>));
      scrollToTop($target.offsetTop);

      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">scrollToTop</span>(<span class="hljs-params">scrollDuration</span>) </span>{
        <span class="hljs-keyword">let</span> scrollTop = <span class="hljs-literal">null</span>, <span class="hljs-comment">// &#x6EDA;&#x52A8;&#x6761;&#x5F53;&#x524D;&#x4F4D;&#x7F6E;</span>
          scrollStep = <span class="hljs-literal">null</span>, <span class="hljs-comment">// &#x6EDA;&#x52A8;&#x6761;&#x7D2F;&#x52A0;&#x524D;&#x7684;&#x4F4D;&#x7F6E;</span>
          s = <span class="hljs-number">0</span>; <span class="hljs-comment">// &#x5173;&#x95ED;&#x8BA1;&#x65F6;&#x5668;&#x7684;&#x6761;&#x4EF6; s = 25&#x65F6;</span>
        <span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.body.scrollTop !== <span class="hljs-number">0</span>) {
          scrollTop = <span class="hljs-built_in">document</span>.body.scrollTop
        } <span class="hljs-keyword">else</span> {
          scrollTop = <span class="hljs-built_in">document</span>.documentElement.scrollTop
        }
        scrollStep = scrollTop = <span class="hljs-built_in">Number</span>.parseInt(scrollTop);
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x6EDA;&#x52A8;&#x524D;&#xFF0C;&#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E;:&apos;</span> + scrollTop);
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x76EE;&#x6807;&#x4F4D;&#x7F6E;&#xFF1A;&apos;</span> + scrollDuration);
        <span class="hljs-comment">// &#x76EE;&#x6807;&#x4F4D;&#x7F6E; &amp; &#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E; &#x8DDD;&#x79BB;&#x8FC7;&#x8FD1;</span>
        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Math</span>.abs(scrollTop - scrollDuration))
        <span class="hljs-keyword">if</span> (<span class="hljs-built_in">Math</span>.abs(scrollTop - scrollDuration) &gt; <span class="hljs-number">21</span>) {
          <span class="hljs-keyword">let</span> scrollInterval = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
            <span class="hljs-keyword">if</span> (s &lt; <span class="hljs-number">26</span>) {
              <span class="hljs-comment">// s &#x662F;&#x7D2F;&#x52A0;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x7528;&#x6765;&#x8DDF;`&#x76EE;&#x6807;&#x4F4D;&#x7F6E; &amp; &#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E;`&#x7684;&#x95F4;&#x8DDD;&#xFF0C;&#x76F8;&#x4E58;&#xFF0C;&#x83B7;&#x5F97;&#x8FC7;&#x6E21;&#x6548;&#x679C;&#x3002;</span>
              <span class="hljs-built_in">window</span>.scrollTo(<span class="hljs-number">0</span>, scrollStep + (scrollDuration - scrollTop) / <span class="hljs-number">25</span> * s);
              s++;
            }
            <span class="hljs-keyword">else</span> {
              clearInterval(scrollInterval);
              scrollStep = <span class="hljs-literal">null</span>;
            }
          }, <span class="hljs-number">10</span>);
        }
      }
    }, <span class="hljs-literal">false</span>);
  }
}
</code></pre>
<h4 id="&#x6587;&#x7AE0;&#x6807;&#x9898;&#x7684;&#x52A8;&#x753B;">&#x6587;&#x7AE0;&#x6807;&#x9898;&#x7684;&#x52A8;&#x753B;</h4>
<pre><code class="lang-Javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animateIn</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> animateIn = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&apos;.container .title strong&apos;</span>);
  <span class="hljs-comment">// console.log(animateIn.getAttribute(&apos;class&apos;))</span>
  <span class="hljs-comment">// console.log(animateIn)</span>
  <span class="hljs-keyword">let</span> that = <span class="hljs-literal">null</span>;
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; animateIn.length; i++) {
    animateIn[i].addEventListener(<span class="hljs-string">&apos;click&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">if</span> (that !== <span class="hljs-literal">null</span>) {
        that.removeAttribute(<span class="hljs-string">&apos;class&apos;</span>);
        <span class="hljs-keyword">if</span> (that === <span class="hljs-keyword">this</span>) {
          <span class="hljs-keyword">this</span>.removeAttribute(<span class="hljs-string">&apos;class&apos;</span>);
          that = <span class="hljs-literal">null</span>;
          <span class="hljs-keyword">return</span>;
        }
      }
      <span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">&apos;class&apos;</span>, <span class="hljs-string">&apos;animate-in&apos;</span>);
      that = <span class="hljs-keyword">this</span>;
    })
  }
}
</code></pre>

                            </div>
                            
<hr>
<div class="btn-group btn-group-justified">
    
    <a class="btn" href="04.html"><b>上一页:</b> 正则截取指定字符串</a>
    
    
    <a class="btn" href="../../angular/study_notes/"><b>下一页:</b> Study notes</a>
    
</div>

                        
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="gb-page-footer">
        <div class="container">
            <ul class="menu">
                <li class="pull-right">
                    <span class="service-info">Copyright GitBook 2018</span>
                </li>
                <li>
                    <a href="#">Return to the top</a>
                </li>
                <li>
                    <a href="#">Updated May 30th 18</a>
                </li>
            </ul>
        </div>
    </footer>
</div>

<script src="../../gitbook/gitbook.js"></script>

    
    <script src="../../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
    

    <script src="../../gitbook/gitbook-plugin-search-pro/search.js"></script>
    

    <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
    

    <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
    

<script>
(function() {
    gitbook.page.hasChanged({"page":{"title":"常用功能收集","level":"2.2.6","depth":2,"next":{"title":"Study notes","level":"3.1","depth":1,"path":"angular/study_notes/README.md","ref":"angular/study_notes/README.md","articles":[{"title":"项目依赖","level":"3.1.1","depth":2,"path":"angular/study_notes/0_depend.md","ref":"angular/study_notes/0_depend.md","articles":[]},{"title":"内置指令","level":"3.1.2","depth":2,"path":"angular/study_notes/01_built-in_instructions.md","ref":"angular/study_notes/01_built-in_instructions.md","articles":[]},{"title":"表单","level":"3.1.3","depth":2,"path":"angular/study_notes/from/README.md","ref":"angular/study_notes/from/README.md","articles":[{"title":"模板案例","level":"3.1.3.1","depth":3,"path":"angular/study_notes/from/0_template_case.md","ref":"angular/study_notes/from/0_template_case.md","articles":[]},{"title":"formControl","level":"3.1.3.2","depth":3,"path":"angular/study_notes/from/01_formControl.md","ref":"angular/study_notes/from/01_formControl.md","articles":[]},{"title":"directives_源码解析","level":"3.1.3.3","depth":3,"path":"angular/study_notes/from/02_directives.md","ref":"angular/study_notes/from/02_directives.md","articles":[]},{"title":"ngModel","level":"3.1.3.4","depth":3,"path":"angular/study_notes/from/03_ng_model.md","ref":"angular/study_notes/from/03_ng_model.md","articles":[]},{"title":"表单验证&自定义验证器","level":"3.1.3.5","depth":3,"path":"angular/study_notes/from/04_Form-Validation_&_Custom-Validator.md","ref":"angular/study_notes/from/04_Form-Validation_&_Custom-Validator.md","articles":[]},{"title":"监听表单数据变化","level":"3.1.3.6","depth":3,"path":"angular/study_notes/from/05_Listen_to_form_data_changes.md","ref":"angular/study_notes/from/05_Listen_to_form_data_changes.md","articles":[]},{"title":"问题收集","level":"3.1.3.7","depth":3,"path":"angular/study_notes/from/06_Problem_collection.md","ref":"angular/study_notes/from/06_Problem_collection.md","articles":[]}]}]},"previous":{"title":"正则截取指定字符串","level":"2.2.5","depth":2,"path":"JavaScript/cases/04.md","ref":"JavaScript/cases/04.md","articles":[]},"dir":"ltr"},"config":{"plugins":["theme-official@2.1.1","-sharing","-fontsettings","sitemap","-search","search-pro"],"root":"./docs/","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"sitemap":{"hostname":"https://blog.honghaitao.net/"},"search-pro":{"cutWordLib":"nodejieba","defineWord":["小需求","基础建设"]},"highlight":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"theme-official":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.1"},"title":"代码收集","gitbook":"3.1.1"},"file":{"path":"JavaScript/cases/05.md","mtime":"2018-05-30T08:23:34.364Z","type":"markdown"},"gitbook":{"version":"3.1.1","time":"2018-05-31T06:23:00.958Z"},"basePath":"../..","book":{"language":""}});
})();
</script>

        
    </body>
</html>