HTML5技术

一分钟搞定AlloyTouch图片轮播组件 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2016-12-12 14:01 我要评论( )

轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹。 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何

轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹。
除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动。所以AlloyTouch制作各种各样的轮播组件还是得心应手。

第一种轮播图如上图所示。下面开始实现的过程。

第0秒

div div idimg styleimg styleimg styleimg styleimg style

一共五张图,每张图占有屏幕比例的百分之88,所以用户的屏幕里可以看到一张多一点的图片,给用户可以横向滑动查看的感觉。

第10秒

.script.

通过Transform(scroller); 注入CSS3 transform属性。

第20秒

scroller..)

这里最大的难点(其实也没有什么难的),就是就是min的值。因为初始值是0,所有向左边滑动一定是负值。可以得到max一定是0。
那么min的值就是: 屏幕的宽度-图片的张数*图片的宽度

第30秒

如上图所示,相对于传统的swipe然后再去触发滚动,上面的跟手然后再去校正的体验是更加良好的。那么怎么实现呢?
首先,AlloyTouch是支持step配置。

, ... ... ... })

只要用户设置的step,最后运动结束之后,AlloyTouch都会帮用户校正到最接近的step的整数倍的位置。
比如上面是100:

第40秒

当然这有个问题,比如用户从0滑倒30,其实他是想去100,但是会被校正到0!!!
所以光使用校正是不够。还需要一个API去阻止校正自己去注入逻辑滚动相应的位置。所以你必须支持AlloyTouch的:

to 方法

to(v [, time, easing])

其中time和easing不是必须。time的默认值是600.

第50秒

scroller (scroller)(scroller..(evt.dx .(v .(.(dx ..(evt len (.currentPage) { items[i].items[i].)

因为一共四张图,所以
min得到的结果是 window.innerWidth * -3
max的值依然是0
step的值是 window.innerWidth
通过设置 inertia: false,把惯性运动关掉
注意看touchEnd里面的return false是为了不去计算手指离开屏幕后的校正位置、惯性运动等逻辑。
touchEnd可以拿到当前的位置v以及当前所处的位置index。
animationEnd是运动结束后的回调,用来设置nav的active。当然不是所有浏览器都支持classList,这里只是为了演示代码足够简洁。
再注意,在touchEnd和animationEnd中能拿到this,也就是AlloyTouch当前对象的实例。其中,
to方法用来运动当前对象
step是当前的步长
还可以拿到currentPage去获取当前所处的页码
还能拿到min和max值,得到运动的区间。

最后

所有例子演示和代码可以在Github上找到。
Github:https://github.com/AlloyTeam/AlloyTouch


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • AlloyTouch与three.js 3D模型交互 - 【当耐特】

    AlloyTouch与three.js 3D模型交互 - 【当耐特】

    2016-12-08 10:00

  • 移动Web触摸与运动解决方案AlloyTouch开源啦 - 【当耐特】

    移动Web触摸与运动解决方案AlloyTouch开源啦 - 【当耐特】

    2016-12-07 15:00

  • 一分钟预览HTTP2特性和抓包分析 - 段隆贤

    一分钟预览HTTP2特性和抓包分析 - 段隆贤

    2016-09-25 10:00

  • 【开源】简单4步搞定QQ登录,无需什么代码功底【无语言界限】下 ~ Net程序员的福利 - 毒逆天

    【开源】简单4步搞定QQ登录,无需什么代码功底【无语言界限】下 ~ Ne

    2015-12-19 11:18

网友点评
=