FastClick.js:解决click事件300ms的延迟
touch.js:百度云手势事件库
GitHub地址:https://github.com/Clouda-team/touch.code.baidu.com
实战touch.js
首先要引入touch.js
再实现事件的绑定
<body>
<div class="box"></div>
<script type="text/javascript" src="js/touch-0.2.14.min.js"></script>
<script type="text/javascript">
var box = document.querySelector('.box');
// 当单击屏幕,顺时针旋转360度
touch.on(box, 'tap', function (ev) {
this.style.webkitTransitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
var timer = window.setTimeout(function () {
this.style.webkitTransitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
window.clearTimeout(timer);
}.bind(this),1000);
});
// 当双击屏幕,逆时针旋转360度
touch.on(box, 'doubletap',function (ev) {
this.style.webkitTransitionDuration = '1s';
this.style.webkitTransform = 'rotate(-360deg)';
var timer = window.setTimeout(function () {
this.style.webkitTransitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
window.clearTimeout(timer);
}.bind(this),1000);
});
// 当长按和滑动的时候,盒子的背景颜色变红
touch.on(box,'hold swipe',function (ev) {
this.style.backgroundColor = 'red';
})
</script>
</body>
hammer.js:多点触控插件。官网:http://hammerjs.github.io/
hammer.js在使用时非常简单,代码示例如下:
<div id="test" class="test"></div>
<script type="text/javascript">
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//为该dom元素指定触屏移动事件
hammertime.on("pan", function (ev) {
//控制台输出
console.log(ev);
});
</script>
Zepto.js:被誉为移动端的小型jQuery
GitHub地址:https://github.com/madrobby/zepto
api文档地址:http://www.css88.com/doc/zeptojs_api/
jQuery由于是在PC端使用的,所以代码中包含了大量的对于IE低版本的兼容处理,而zepto值应用于移动端开发,所以在jQuery的基础上没有对低版本的IE进行支持
jQuery中提供了很多的选择器类型及DOM操作方法,但是zepto中只是实现了部分常用的选择器和方法,例如:jQuery中的动画方法有animate,show,hide,toggle,fadeIn,fadeOut,fadeToggle,slideUp,slideDown,slideToggle...但是zepto中只有animate
所以,zepto的源代码比jQuery小很多。
zepto专门为移动端开发而诞生,所以相对于jQuery来说更适合移动端、
zepto的animate动画方法支持了CSS3动画的操作
zepto专门准备了移动端常用的事件操作:tap点击,singleTap单击,doubleTap双击,longTap长按,sswipe滑动,swipeUp上滑,swipeDown下滑,swipeLeft左滑,swipeRight右滑....
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
$('.box').singleTap(function (ev) {
$(this).animate({
rotate: '360deg'
}, 1000, 'linear', function () {
this.style.webkitTransform = 'rotate(0deg)';
})
}).on('touchstart', function () {
$(this).css('background', 'red');
});
</script>