各メソッドを使用して番号計算を実施
21507 ワード
ブランドサイト用のアニメーションのカウントコードの解析
1)計算方法1 setInterval関数: を使用して一定の時間間隔でタスクを実行 clearInterval関数:clearIntervalを使用してsetInterval実行を終了
実行を停止していないすべての指定されたタスクが実行されます.
次のタスクスケジュールの停止
2)計算方法2 each():配列またはオブジェクト要素をチェックする方法 countTo変数を使用してdata-count値 を受け入れる Math.lower関数を使用して整数 のみを出力
カウントコード解析内容
カウント方法はいくつかありますが、上記の2つの例でカウント操作について説明しました.コードを適用する場合、実際の操作が正常かどうかは、ブランドサイトを作成する際に判断する必要がある場合があります.
追加)の2回目のクエリanimateの関数タイプ AttributeTypeDescriptionasingString現在のアニメーションのゆったりした設定値が表示されます.ElemDOM Element現在のアニメーションのターゲット要素.(jQueryパッケージ以外の純粋なDOM要素)endNumberアニメーション終了時の値.NowNumberアニメーションの再生中の現在の値.オプションsObject設定のオプションが表示されます.posNumber加速時に使用する速度を表示します.0~1の値を出力します.propsStringは、現在再生されているcssのプロパティ値を表示します.上等または左等.startNumberアニメーションの開始値が表示されます.UnitStringアニメーションの再生単位を表示します.例えばpx、emなど.
1)計算方法1
<!-- html -->
<div>
<ul>
<li class="number">99</li>
</ul>
</div>
<!-- https://jsfiddle.net/woorim0ju/grq7ko1f/1/ -->
// JS
$(function() {
var cnt0 = 0;
counterFn();
function counterFn() {
id0 = setInterval(count0Fn, 100);
//함수를 실행
function count0Fn() {
cnt0++;
if (cnt0 > 99) {
clearInterval(id0);
// 함수를 종료
} else {
$(".number").text(cnt0);
}
}
}
});
//https://jsfiddle.net/woorim0ju/grq7ko1f/1/
1-1) 実行を停止していないすべての指定されたタスクが実行されます.
次のタスクスケジュールの停止
<!-- html -->
<section id="counter-stats" class="wow fadeInRight" data-wow-duration="1.4s">
<div class="container">
<div class="row">
<div class="col-lg-3 stats">
<i class="fa fa-code" aria-hidden="true"></i>
<div class="counting" data-count="900000">0</div>
<h5>Lines of code</h5>
</div>
<div class="col-lg-3 stats">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="counting" data-count="280">0</div>
<h5>Projects done</h5>
</div>
<div class="col-lg-3 stats">
<i class="fa fa-user" aria-hidden="true"></i>
<div class="counting" data-count="75">0</div>
<h5>Happy clients</h5>
</div>
<div class="col-lg-3 stats">
<i class="fa fa-coffee" aria-hidden="true"></i>
<div class="counting" data-count="999">0</div>
<h5>Cups of coffee</h5>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</section>
<!-- https://codepen.io/shvvffle/pen/JRrLqG -->
//JS
$('.counting').each(function() {//counting 클래스에 이벤트 발생(페이지 로드와 동시에)
var $this = $(this),
countTo = $this.attr('data-count'); //data-count의 속성값 불러오기
var countObj = {
countNum: $this.text()
} // countNum의 text의 값은 0
$(countObj).animate({countNum: countTo},{
//countTo의 값을 담은 변수(90000, 280, 75, 999)
duration: 3000, //동작이 완료될 때까지 걸리는 시간
easing:'linear', //동작이 나타나는 방법
step: function() { //동작 실행
$this.text(Math.floor(this.countNum)); //정수값으로 출력되는 함수(Math함수)
},
complete: function() { //동작 완료
$this.text(this.countNum);
}
});
});
//https://codepen.io/shvvffle/pen/JRrLqG
2-1) カウントコード解析内容
カウント方法はいくつかありますが、上記の2つの例でカウント操作について説明しました.コードを適用する場合、実際の操作が正常かどうかは、ブランドサイトを作成する際に判断する必要がある場合があります.
追加)
Reference
この問題について(各メソッドを使用して番号計算を実施), 我々は、より多くの情報をここで見つけました https://velog.io/@jung/each-메소드를-이용하여-숫자-카운팅을-화면에-보여-주는-모션-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol