Jquery Mobile轉場特效之slide | 小小iPhone開發

2012

Jquery Mobile轉場特效之slide

作者：小小 ? 發布：2012-12-12 14:03 ? 分類：jQueryMobile ? 閱讀：1,354 次 ? 暫無評論 ?

Jquery Mobile頁面轉場有諸多特效，其中slide是滑動效果，確切說是從右向左滑動，在項目中使用時，如果有從右向左滑動，那么再加上“返回”的從左向右的滑動就有更好的體驗了，由于jquery mobile沒有特定的從左向右滑動的關鍵詞，下面說下這種特效的實現方式。

本來的從右向左滑動的特效的slide的寫法：

<a href=”#day_report_3″ data-transition=”slide”>Next</a>

或：

$(‘#day_report_5′).bind( ‘swipeleft’, function( e ) {
$.mobile.changePage(“#day_report_1″,{transition: “slide”,changeHash: true});
e.stopImmediatePropagation();
return false;
} );

從左向右的slide特效的寫法：

<a href=”#day_report_2″ data-transition=”slide” data-direction=”reverse”>Next</a>

或：

$(‘#day_report_5′).bind( ‘swiperight’, function( e ) {
$.mobile.changePage(“#day_report_4″,{transition: “slide”,reverse:”true”,changeHash: true});
e.stopImmediatePropagation();
return false;
} );

在<a> 中設置data-direction=”reverse”，在$.mobile.changePage中設置reverse:”true”,這樣設置后的結果是轉場特效反向，也就實現了我們需要的效果了。

本文固定鏈接: http://iphone.xiaoxiaostudio.net/2012/12/12/jquery-mobile%e8%bd%ac%e5%9c%ba%e7%89%b9%e6%95%88%e4%b9%8bslide/ | 小小iPhone開發

總結

以上是生活随笔為你收集整理的Jquery Mobile转场特效之slide | 小小iPhone开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。