ホームページ > 記事 > ウェブフロントエンド > JavaScript Slip.js は全画面スライド式モバイル Webpage_JavaScript スキルを実装します
JavaScript Slip.js は全画面スライド式モバイル Webpage_JavaScript スキルを実装します
- WBOYオリジナル
- 2016-05-16 15:29:501416ブラウズ
Slip.jsでは、HTMLとCSSを書くだけで、簡単なロジックであれば1行のJSコードで実現できるため、開発効率が大幅に向上します。自慢ではありませんが、私は上記のデモを 30 分以内に書きました。
具体的にはどうすればいいですか？たとえば、次のような要件があります。
4 ページあり、各ページに写真があり、指をスライドするたびに画面全体が切り替わります。
まず HTML を見てください:
<!doctype html> ... <script type="text/javascript" src="slip.js"></script> <body> ... <div id="container"> <div class="page page-1"><img src="img/1.png"></div> <div class="page page-2"><img src="img/2.png"></div> <div class="page page-3"><img src="img/3.png"></div> <div class="page page-4"><img src="img/4.png"></div> </div> </body>
JS の最後の外観:
var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);
解説:
- Slip: Slip.js を導入すれば、この実用的で素晴らしいメソッドを入手できます。
- container: スライドされるコンテナには、各スライド ページが含まれます。
- 'y': ページのスライド方向。'x' を渡すこともできます。
- webapp: 全画面のスライド ページとして表示するページを設定する方法。
- pages: ページ要素のリスト。
すべて 1 行のコードで完了します:
Slip(document.getElementById('container'), 'y').webapp();
上記のコード行ではページが定義されていないことがわかります。
webapp メソッドがパラメータを渡さない場合、Slip はコンテナの直接の子要素 (son 要素) をページとして取得します。
この時点で、想像を絶するほどシンプルかつ高速な全画面スライド Web ページが完成します。私には30分かかりますが、あなたなら10分でできるはずです。
もちろん: Slip.js にはさらに強力な機能がたくさんあります。たとえば、ページがスライドしたときに何を行うかを定義できます。PM は、非常に興味深い要件を追加しました。
ページが最後のページにスライドしたら、更新してください。 。 。
数行のコードを追加するだけで完了します:
Slip(document.getElementById('container'), 'y').webapp().end(function() {
if (this.page === 3) location.reload();
});
ほら、これって文句言う間もなく完成するじゃないですか。
上記はこの記事の全内容です。この記事はほんの始まりにすぎません。今後もさらに包括的な記事をお見逃しなく。 。