続・画面の外から出てくるスマートフォンのメニュー
前回の画面の外からにゅっと出てくるスマートフォンのメニューの続きです。前回の記事から少しいじりました。おおまかな変更点はクリックをタップにしイージングを追加しました。CSSにiOSで滑らかにスクロールする記述を追加しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#dblock{ bottom:0; display:none; width: 100%; height:100%; float:left; background:#eee; position: absolute; overflow: auto; -webkit-overflow-scrolling: touch; //ここを追加 z-index:99; } |
-webkit-overflow-scrolling: touch;を追加してiosでのメニュー内のスクロールを滑らかにしました。
クリックをタップにする＆イージングの追加
Rain or Shineさんのところで配布されているjquery.tap-1.0.3.jsを使わせていただきました。
スマホでシングルタップのレスポンスを向上させるjQueryプラグイン
イージングのライブラリーはこちらよりダウンロードしました
ヘッドに読み込みを記述
|
1 2 |
<script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.tap-1.0.3.js"></script> |
clickをtapに変更引数にeaseOutExpoを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function(){ $("#wrapper").css("display", "block"); $('#dnonebtn').tap(function () { $("#dblock").slideDown(400,"easeOutExpo",function(){ $("#wrapper").toggle(0); $(this).clearQueue([]); }); }); $("#dblockbtn").tap(function () { $("#dblock").slideUp(300,"easeOutExpo"); $(this).clearQueue([]); $("#wrapper").toggle(0); }); }); |
後はAndroid2系のオーバーフロー時のスクロール対策です。スクロールさせることだけはできましたが、滑らかにスクロールしないので未解決です！
- 2013年10月20日日曜日
- ：Naruhiko Wakai
comments