标签：设置 ons 设计 释放 未来 self target elements code
先了解下 移动端的触屏滑动
毕竟这玩意其实和PC端还是有一定的区别的
hh
整理了下网上的资料放一放
移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
|
1
|
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no" /> |
|
1
|
event.preventDefault(); |
下面给出一个案例，需在移动设备上才能看出效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
if (!!self.touch) self.slider.addEventListener(‘touchstart‘,self.events,false); //定义touchstart的事件处理函数start: function(event) { event.preventDefault(); // 阻止触摸事件的默认动作,即阻止滚屏 var touch = event.touches[0]; // touches数组对象获得屏幕上所有的touch，取第一个touch // 取第一个touch的坐标值 startPos = { x: touch.pageX, y: touch.pageY, time: +new Date }; // 绑定事件 this.slider.addEventListener(‘touchmove‘,this,false); this.slider.addEventListener(‘touchend‘,this,false);}, |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//移动move: function(event) { // 阻止触摸事件的默认行为，即阻止滚屏 event.preventDefault(); // 当屏幕有多个touch或者页面被缩放过，就不执行move操作 if (event.touches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.touches[0]; endPos = { x: touch.pageX - startPos.x, y: touch.pageY - startPos.y }; // 执行操作，使元素移动 this.slider.className = ‘cnt‘; this.slider.style.left = -this.index * 600 + endPos.x + ‘px‘;}, |
同样首先阻止页面的滚屏行为：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 滑动释放end: function(event){ // 滑动的持续时间 var duration = +new Date - startPos.time; this.icon[this.index].className = ‘‘; if (Number(duration) > 100) { // 判断是左移还是右移，当偏移量大于50时执行 if (endPos.x > 50) { if (this.index !== 0) this.index -= 1; } else if(endPos.x < -50) { if(this.index !== 4) this.index += 1; } } this.slider.className = ‘cnt f-anim‘; this.slider.style.left = -this.index*600 + ‘px‘; this.icon[this.index].className = ‘curr‘; // 解绑事件 this.slider.removeEventListener(‘touchmove‘, this, false); this.slider.removeEventListener(‘touchend‘, this, false);}, |
手指离开屏幕后，所执行的函数。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;" /> <title>移动端触摸滑动</title> <meta name="author" content="rainna" /> <meta name="keywords" content="rainna‘s js lib" /> <meta name="description" content="移动端触摸滑动" /> <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no" /> <style> *{margin:0;padding:0;} li{list-style:none;} .m-slider{width:600px;margin:50px 20px;overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:3000px;} .m-slider .cnt li{float:left;width:600px;} .m-slider .cnt img{display:block;width:100%;height:450px;} .m-slider .cnt p{margin:20px 0;} .m-slider .icons{text-align:center;color:#000;} .m-slider .icons span{margin:0 5px;} .m-slider .icons .curr{color:red;} .f-anim{-webkit-transition:left .2s linear;} </style> </head> <body> <div class="m-slider"> <ul class="cnt" id="slider"> <li> <img src="http://levi.yii.so/wp-content/uploads/2014/08/o_3068640196117481166.jpg" alt="" /> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </li> <li> <img src="http://levi.yii.so/wp-content/uploads/2014/08/o_4798022453110310215.jpg" alt="" /> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </li> <li> <img src="http://levi.yii.so/wp-content/uploads/2014/08/o_6608946691259322175.jpg" alt="" /> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </li> <li> <img src="http://levi.yii.so/wp-content/uploads/2014/08/o_6619295294699949331.jpg" alt="" /> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </li> <li> <img src="http://levi.yii.so/wp-content/uploads/2014/08/o_3068640196117481166.jpg" alt="" /> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </li> </ul> <div class="icons" id="icons"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script> var slider = { // 判断设备是否支持touch事件 touch: (‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch, slider: document.getElementById(‘slider‘), // 事件 events: { index: 0, // 显示元素的索引 slider: this.slider, // this为slider对象 icons: document.getElementById(‘icons‘), icon: this.icons.getElementsByTagName(‘span‘), handleEvent: function(event) { // this指events对象 var self = this; if (event.type == ‘touchstart‘) { self.start(event); } else if(event.type == ‘touchmove‘) { self.move(event); } else if(event.type == ‘touchend‘) { self.end(event); } }, // 滑动开始 start: function(event) { event.preventDefault(); // 阻止触摸事件的默认动作,即阻止滚屏 var touch = event.touches[0]; // touches数组对象获得屏幕上所有的touch，取第一个touch startPos = { // 取第一个touch的坐标值 x: touch.pageX, y: touch.pageY, time: +new Date }; // 绑定事件 this.slider.addEventListener(‘touchmove‘, this, false); this.slider.addEventListener(‘touchend‘, this, false); }, // 移动 move: function(event) { event.preventDefault(); // 阻止触摸事件的默认行为，即阻止滚屏 // 当屏幕有多个touch或者页面被缩放过，就不执行move操作 if (event.touches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.touches[0]; endPos = { x: touch.pageX - startPos.x, y: touch.pageY - startPos.y }; // 执行操作，使元素移动 this.slider.className = ‘cnt‘; this.slider.style.left = -this.index * 600 + endPos.x + ‘px‘; }, // 滑动释放 end: function(event) { var duration = +new Date - startPos.time; // 滑动的持续时间 this.icon[this.index].className = ‘‘; if (Number(duration) > 100) { // 判断是左移还是右移，当偏移量大于50时执行 if (endPos.x > 50) { if(this.index !== 0) this.index -= 1; } else if(endPos.x < -50) { if (this.index !== 4) this.index += 1; } } this.slider.className = ‘cnt f-anim‘; this.slider.style.left = -this.index*600 + ‘px‘; this.icon[this.index].className = ‘curr‘; // 解绑事件 this.slider.removeEventListener(‘touchmove‘, this, false); this.slider.removeEventListener(‘touchend‘, this, false); } }, // 初始化 init: function() { // this指slider对象 var self = this; // addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性 if(!!self.touch) self.slider.addEventListener(‘touchstart‘, self.events, false); } }; slider.init(); </script> </body></html> |
标签：设置 ons 设计 释放 未来 self target elements code
原文地址：http://www.cnblogs.com/wulibo/p/7452234.html
