jQueryMobileのページ切替効果をいろいろ試してみる
プレビュー
↓別ウィンドウを開いて見る
ページ切替効果
※おすすめQRコード読み取りアプリ
お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料
ポイント
- 「data-transition」にfadeやflipといった値を指定します。
- fade:ページがフェードイン/フェードアウトで切り替わる
- flip:ページが回転して切り替わる
- pop:ページが拡大しながら切り替わる
- turn:ページが左端を軸にターンして切り替わる
- flow:ページが浮き上がったようにして切り替わる
- slidefade:ページがフェードイン/フェードアウトしながら左右にスライドして切り替わる
- slide:ページが左右にスライドして切り替わる
- slideup:ページが下から上にスライドして切り替わる
- slidedown:ページが上から下にスライドして切り替わる
- none:切替効果なし
- ページ切替効果を逆回しにしたい場合は、「data-direction=“reverse”」を記述します。
コード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ページ切替効果</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>ページ切替効果</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#about" data-transition="fade">fade</a></li> <li><a href="#about" data-transition="flip">flip</a></li> <li><a href="#about" data-transition="pop">pop</a></li> <li><a href="#about" data-transition="turn">turn</a></li> <li><a href="#about" data-transition="flow">flow</a></li> <li><a href="#about" data-transition="slidefade">slidefade</a></li> <li><a href="#about" data-transition="slide">slide</a></li> <li><a href="#about" data-transition="slideup">slideup</a></li> <li><a href="#about" data-transition="slidedown">slidedown</a></li> <li><a href="#about" data-transition="none">none</a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>ページ切替効果</h1> </div> <div data-role="content"> <p>コンテンツ内容</p> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> </body> </html>