Jquery Mobile转场特效之slide

jQuery Mobile页面转场有诸多特效,其中slide是滑动效果,确切说是从右向左滑动,在项目中使用时,如果有从右向左滑动,那么再加上“返回”的从左向右的滑动就有更好的体验了,由于jquery mobile没有特定的从左向右滑动的关键词,下面说下这种特效的实现方式。

本来的从右向左滑动的特效的slide的写法:

[javascript]  view plain  copy
  1. <a href="#day_report_3" data-transition="slide">Next</a>  


或:

[javascript]  view plain  copy
  1. $('#day_report_5').bind( 'swipeleft'function( e ) {     
  2.     $.mobile.changePage("#day_report_1",{transition: "slide",changeHash: true});     
  3.     e.stopImmediatePropagation();      
  4.     return false;    
  5.    } );  


从左向右的slide特效的写法:

[javascript]  view plain  copy
  1. <a href="#day_report_2" data-transition="slide" data-direction=”reverse”>Next</a>  


或:

[javascript]  view plain  copy
  1. $('#day_report_5').bind( 'swiperight'function( e ) {     
  2.     $.mobile.changePage("#day_report_4",{transition: "slide",reverse:"true",changeHash: true});     
  3.     e.stopImmediatePropagation();      
  4.     return false;    
  5.    } );  


在<a> 中设置data-direction=”reverse”,在$.mobile.changePage中设置reverse:"true",这样设置后的结果是转场特效反向,也就实现了我们需要的效果了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值