移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
注意：
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。
event.preventDefault();
源代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>touch test</title>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<style>
html, body{width:100%; height:100%; margin:0; padding:0; background:#0F0;}
</style>
</head>
<body>
</body>
</html>
<script>
(function touchInit(){
var startPos, endPos, isScrolling, direction, frequency;
var init = (function init(){
startPos = {};
endPos = {};
isScrolling;//isScrolling为1时，表示纵向滑动，-1为横向滑动
direction = {x:0,y:0};//横向移动方向，左上负，右下正
frequency = {x:0,y:0};//变换次数
return init;
})();
$('html').on('touchstart',function(event)
{
console.log('touchstart');
//touches数组对象获得屏幕上所有的touch，取第一个touch
//originalEvent指向jquery事件的原始对象
var touch = event.originalEvent.targetTouches[0];
//取第一个touch的坐标值
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
endPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
});
$('html').on('touchmove',function(event)
{
console.log('touchmove');
// 判断默认行为是否可以被禁用
if (event.cancelable) {
// 判断默认行为是否已经被禁用
if (!event.defaultPrevented) {
event.preventDefault();
}
}
var touch = event.originalEvent.targetTouches[0];
var scrPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
var dirPos = {x:touch.pageX - endPos.x,y:touch.pageY - endPos.y};
endPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
isScrolling = Math.abs(scrPos.x) < Math.abs(scrPos.y) ? 1 : -1;
if(isScrolling > 0 && dirPos.y != 0)
{
var y = dirPos.y > 0 ? 1 : -1;
if(direction.y != y)
{
direction.y = y;
frequency.y++;
}
}
else if(isScrolling < 0 && dirPos.x != 0)
{
var x = dirPos.x > 0 ? 1 : -1;
if(direction.x != x)
{
direction.x = x;
frequency.x++;
}
}
});
$('html').on('touchend',function(event)
{
console.log('touchend');
if(direction.y > 0 && frequency.y == 1)
alert('下滑')
else if(direction.y < 0 && frequency.y == 1)
alert('上滑')
init();
});
})();
</script>
最新评论: