开裂效果的转场,jquery.slitslider.js的zepto实现版本
来源:互联网 发布:狄仁杰第几部好看 知乎 编辑:程序博客网 时间:2024/04/27 01:11
zepto版本的 jquery.slitslider.js。
DEMO
桌面版DEMO
默认参数,改变其中的参数可以制作各种转场效果。
{ orientation:'horizontal', //动画移动方向。horizontal:垂直,vertical:水平 easing: 'ease-in-out', // the easing function speed: 350, //动画持续时间 scale:1, //图片缩放大小 rotateZ:0, //图片旋转角度 opacity:1, //图片透明度 maxTrans:200 //图片最大移动距离}
在实例化的的时候可以修改默认参数。在html节点中可以使用data-*
的方式修改单个页面的参数。例如data-orientation="vertical"
可以让第二个页面的转场变为左右分开,并且data-*
不会影响其他页面。
<div class="slider"> <div></div> <div data-orientation="vertical" data-scale="2"></div> <div></div></div><script> var sslider = $('.slider').SlitSlider({speed:1000}); $(document).swipeUp(function () { //下一页<pre name="code" class="javascript">var item = this.items.eq(itemIndex);var pW = item.width(),pH = item.height();
sslider.next(); }); $(document).swipeDown(function () { //上一页 sslider.prev(); });</script>
调用.next()
为下一页,.prev()
为上一页。
大体实现方法:
当调用next()
的时候会根据.slider
上的
data-step
来确定当前是第几页,并取得当前页面的节点。和页面的宽度高度
pW,pH
`
var item = this.items.eq(itemIndex);var pW = item.width(),pH = item.height();
然后是关键部分,将当页的内部节点包在一个class为wrapInner
的新div中,这个div是为了改变当前内容的位置所用,下面会用到。然后再包一层class为half1
的div,这个层是为了做动画。把包好的节点half1复制一份出来,并将half1换成half2加到当前页面根节点之下。没错half1与half2就是动画中页面裂开的两个部分。
item.wrapInner('<div class="wrapInner"></div>').wrapInner('<div class="half1">');var half1 = item.find('.half1');half1.clone().removeClass('half1').addClass('half2').appendTo(item);var half2 = item.find('.half2');
剩下的部分就是根据是垂直还是水平来为half1,half2加上不同的样式,使其宽度或者高度为其父节点的一半,并使两部分对其。
if......//垂直 half1.css({width:pW,height:pH/2,'overflow':'hidden'}); half2.css({width:pW,height:pH/2,'overflow':'hidden'}); half2.find('.wrapInner').css({'margin-top':-pH/2}); ......}else{ //水平 half1.css({width:pW/2,height:pH,'overflow':'hidden','position':'absolute','top':'0px','left':'0px'}); half2.css({width:pW/2,height:pH,'overflow':'hidden','position':'absolute','top':'0px','right':'0px'}); half1.find('.wrapInner').css({width:pW,height:pH}); half2.find('.wrapInner').css({width:pW,height:pH,'margin-left':-pW/2}); ......}
最后就是按照设置的参数做转场动画了。
当调用prev()
的时候将half1,half2的参数归为零来做返回动画,动画做完后将half2与之前包的div删掉,使其恢复之前的节点层次。这样动画就做完了。
源代码在我的Github
欢迎关注我的微博@UED天机
也可以收藏天机的官网,http://ued.sexy/ 经常更新最新的教程。
0 0
- 开裂效果的转场,jquery.slitslider.js的zepto实现版本
- zepto.js不同于Jquery的地方
- 实现类似格瓦拉的动画转场效果
- DateTimePicker的Zepto版本
- zepto.js 模版中的事件的实现
- 转场动画的效果
- zepto.js的好处
- ios collectionview 的转场效果
- zepto和jquery的区别
- jQuery与Zepto的异同
- jQuery与Zepto的异同
- zepto和jquery的区别
- jQuery与Zepto的异同
- jQuery与Zepto的异同
- jQuery与Zepto的异同
- jQuery 与 Zepto 的区别
- jquery与zepto的区别
- 说说zepto.js的事件
- spring MVC 跳转
- HDU 4952 Number Transformation
- 驱动能力小议
- Spring MVC 首页
- HDOJ 4952 Number Transformation
- 开裂效果的转场,jquery.slitslider.js的zepto实现版本
- 算法导论 2.3-7 python实现
- POJ 3264 Balanced Lineup( 线段树&&RMQ )
- DP模型状态转移方程(mark一下,有天我也要自己总结)
- poj 3281 Dining
- hdu 4878 ZCC loves words(AC自动机+dp+矩阵快速幂+中国剩余定理)
- VB.NET & 职责链模式 (下机时间操作)
- 水仙花数--java
- 使用C#版本的gdal库打开hdf文件