AlloyTouch插件
1、老样子引入js
<script src="js/transform.js"></script>
<script src="js/alloy_touch.js"></script>
2、HTML
<div id="wrapper">
<div id="scroller">
<ul>
<li> row 1</li>
<li> row 2</li>
<li> row 3</li>
<li>row 5</li>
<li> row 5</li>
<li> row 7</li>
<li> row 8</li>
<li> row 9</li>
<li> row 11</li>
<li> row 11</li>
<li> row 12</li>
<li> row 13</li>
<li> row 14</li>
<li> row 15</li>
<li> row 16</li>
<li> row 17</li>
<li> row 18</li>
<li> row 19</li>
<li> row 20</li>
<li> row 21</li>
<li> row 22</li>
<li> row 23</li>
<li> row 24</li>
<li> row 25</li>
</ul>
</div>
</div>
(注意#scroller外也要有个div)
3、方法
new AlloyTouch({
touch:"#wrapper",//反馈触摸的dom
target: target, //运动的对象
property: "translateY", //被运动的属性
min: 100, //不必需,运动属性的最小值,越界会回弹
max: 2000, //不必需,滚动属性的最大值,越界会回弹
vertical: true,//不必需,默认是true代表监听竖直方向touch
sensitivity: 1,//不必需,触摸区域的灵敏度,默认值为1,可以为负数
factor: 1,//不必需,表示触摸位移与被运动属性映射关系,默认值是1
step: 45,//不必需,用于校正到step的整数倍
change:function(){ }, //不必需,属性改变的回调。alloytouch.css版本不支持该事件
touchStart:function(value){ },
touchMove:function(value){ },
touchEnd:function(value){ },
animationEnd:function(value){ } //运动结束
})
通常绑定element来使用
var target = document.querySelector("#scroller");
//给element注入transform属性
Transform(target,true); new AlloyTouch({
...
...
AlloyTouch插件的更多相关文章
- Omi教程-插件体系
插件体系 Omi是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联. omi-drag 且看这个例子: 点击这里→在线 ...
- Scoped CSS规范草案
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS 写在前面 问:什么是Scoped CSS规范? Scoped CSS规范是We ...
- Omi v1.0震撼发布 - 令人窒息的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
- 腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面
腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面 今天,腾讯正式开源发布 Omix 1.0, 让开发者使用 JSX 或 hyperscript 创建用户界面. Gi ...
- Omi v1.0震撼发布 - 开放现代的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
- AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...
- AlloyTouch Button插件-不再愁click延迟和点击态
移动端不能使用click,因为click会有300ms.所有有了fastclick这样的解决方案.然后fastclick并没有解决点击态(用户点击的瞬间要有及时的外观变化反馈)的问题.hover会有不 ...
- AlloyTouch之select选择插件
原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Simple-Select 写在前面 很多情况下,产品希望统一安卓和IOS select交互和样式. ...
- AlloyTouch之无限循环select插件
写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项.让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动.00ms和01ms是无缝链接 ...
随机推荐
- [LeetCode] Valid Parentheses 验证括号
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- [Membership架构分析1] ASP.NET membership的表结构
转自:http://blog.sina.com.cn/s/blog_650b9ecc0100iqfo.html 1)表名:aspnet_Applications 说明:保存应用程序信息(系统名) 每一 ...
- Git原理及常用操作命令总结
git原理介绍及操作 git 原理——
- bzoj2243
2243: [SDOI2011]染色 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 6753 Solved: 2496[Submit][Status ...
- MyBatis 延迟加载,一级缓存,二级缓存设置
什么是延迟加载 resultMap中的association和collection标签具有延迟加载的功能. 延迟加载的意思是说,在关联查询时,利用延迟加载,先加载主信息.使用关联信息时再去加载关联信息 ...
- C# mysql 获取所有表名
public static List<string> GetAllTableName() { List<string> retNameLis ...
- QEMU/KVM虚拟机安装配置
1.安装相关组件: [root@KVM ~]# yum install qemu-img qemu-kvm qemu-kvm-tools virt-manager virt-viewer virt-v ...
- iOS - 滑屏方案
参考自:iOS开发- 通过ChildViewCotroller ViewController容器 产品增加新的版面,类似于网易新闻,百度新闻,腾讯新闻等新闻客户端首页多屏幕滑屏切换,找了一些开源代码研 ...
- skipping the actual organic impact moderation supplied
The most recent running footwear design has gone out. The high cost is actually $150. Expert sports ...
- 第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)
8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近 ...