Pace.js 및 NProgress.js와 함께 로딩 진행 플러그인을 사용하는 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

Pace.js 및 NProgress.js와 함께 로딩 진행 플러그인을 사용하는 방법(자세한 튜토리얼)

亚连

풀어 주다： 2018-06-08 17:24:05

원래의

1987명이 탐색했습니다.

이 두 플러그인은 로딩 진행 애니메이션에 관한 것입니다. 오늘은 두 로딩 진행 플러그인인 Pace.js와 NProgress.js에 대해 간략히 살펴보겠습니다. 관심 있는 친구들은 이 두 플러그인을 함께 살펴보세요. 플러그인은 모두 로딩 진행 애니메이션에 관한 것입니다. 적어도 저에게는 각각의 장점이 있습니다. 오늘 저는 로딩 진행 애니메이션을 만지작거리고 (이 두 가지) 로딩 진행 애니메이션을 많이 공부했습니다. 로딩 진행 애니메이션에 대한 사전 이해가 있는 것 같습니다.

NProgress.js

NProgress는 jquery를 기반으로 하며 버전은 >1.8

이어야 합니다. API:

　　NProgress.start() — 진행률 표시줄 시작

　　　NProgress.set(0.4) — 진행률을 특정 항목으로 설정 백분율 위치

　　NProgress.inc() — 진행률을 조금씩 높입니다
　　　NProgress.done() — 진행률 표시줄을 완료됨으로 표시

소개:

<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
 <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来

로그인 후 복사

사용:

<script>
$(function() {
 　　NProgress.start();
 　　$(window).load(function() {
 　　NProgress.done();
 });
</script>

로그인 후 복사

사용자 정의 애니메이션 스타일:

스타일 쓰기 우리는 스크립트 태그에서 이것은 약간의 트릭이라고 정의했습니다.

<script type="text" id="myId"><br>　　<p class="splash card"><br> 　　<p class="lead" style="text-align:center">不要回来，马上走开...</p>
　　 <p class="progress">
 　　<p class="mybar" role="bar">
 　　</p>
 　　</p>
</p><br></script>

로그인 후 복사

이것은 css

html,body,iframe{
 margin: 0;
 padding: 0;
}
#nprogress{
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: #f7f7f7;
 z-index: 999;
}
.spinner-icon{
 display: none!important;
}
.splash {
 position:absolute;
 top:40%;
 left:0;
 right:0;
 margin: auto;
 }
 .splash img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 height: 100px;
 width: 100px;
 }
 .card {
 background-color: #f7f7f7;
 padding: 20px 25px 15px;
 margin: 0 auto 25px;
 width: 380px;
 }
 .mybar {
 background: #29d;
 height:10px;
 }
 .progress {
 height: 10px;
 overflow: hidden;
 }

로그인 후 복사

js 코드가 다음과 같습니다:

<script type="text/javascript">
 $(function(){
  NProgress.configure({
  template: $(&#39;#myId&#39;).html() // template是用来设置动画样式的属性
  });
  NProgress.start();
 });
 $(window).load(function(){
  NProgress.done();
 })
 </script>

로그인 후 복사

요약: 애니메이션이 시작되는 시점과 끝나는 시점을 js에서 제어하고 로드된 애니메이션 스타일을 제어합니다.

사용자 정의 스타일의 두 가지 핵심 포인터는 역할 속성입니다.

role=bar: 수평 로딩 바

role=spinner 회전하는 작은 원

샘플 2: (css 생략)

<script type="text" id="myId">
　　<em id="__mceDel"><em id="__mceDel"><p class="bar" role="bar" style="display=block"><br>　　　　<p class="peg"></p><br>　　</p><br>　　<p class="spinner" role="spinner"><br>　　　　<p class="spinner-icon"></p><br>　　</p></em></em>
</script>

로그인 후 복사

js:

API :

Pace.start: 진행률 표시줄 표시를 시작합니다. AMD 또는 Browserify를 사용하여 모듈을 로드하지 않는 경우 기본적으로 실행됩니다.

Pace.restart: 진행률 표시줄이 다시 로드되어 표시됩니다.

Pace.stop: 진행률 표시줄을 숨기고 로딩을 중지합니다.
Pace.track: 하나 이상의 요청 작업을 모니터링합니다.
Pace.ignore: 하나 이상의 요청 작업을 무시합니다.

사용법:

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br>　　<!-- 此处的css样式就决定了加载进度动画的样式 -->
</head>

로그인 후 복사

애니메이션 스타일 변경:

pace는 이미 다양한 종류의 로딩 진행 애니메이션을 디자인했기 때문에 CSS 파일만 변경하면 됩니다.

요약: pace는 파일을 직접 가져올 수 있다는 장점이 있습니다. 그게 다입니다. 직접 코드를 작성할 필요가 없습니다. 로딩 진행 애니메이션이 제공됩니다. 공식 웹사이트에서 제공하는 로딩 진행 애니메이션에는 마스크 레이어가 없습니다.

물론 직접 설정할 수도 있습니다(방법은 모르겠습니다).

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.