Jquery Mobile转场特效之slide | 小小iPhone开发

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开发

上一篇:C. 【UNR #2】黎明前的巧克力


下一篇:hdu1542 Atlantis 线段树--扫描线求面积并