无线端web开发学习总结

无线web开发之前要做一些准备工作：
一、必需的reset样式库
1、其中的重点是盒模型box-sizing：由原来pc端的content-box改为border-box。

1. *, *:before, *:after {
2. -webkit-box-sizing: border-box;
3. -moz-box-sizing: border-box;
4. box-sizing: border-box;
5. }

2、设定root元素的字体大小，便于子元素rem单位的设置。

1. html { font-size: 100%; }

3、使Chrome使用小于12px的字体。

1. *, *:before, *:after {
2. -webkit-text-size-adjust: 100%;
3. -ms-text-size-adjust: 100%;
4. text-size-adjust: 100%;
5. }

4、去除点击元素后的高亮效果。

1. *, *:before, *:after {
2. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
3. }

5、去除焦点元素周围的虚线。

1. *:focus {
2. outline: none;
3. }

6、其余样式reset等同pc端的样式reset。

1. h1, h2, h3, h4, h5, h6 {
2. font-size: 100%;
3. font-weight: normal;
4. }
5. /* 消除图片下方3像素空白 */
6. img {
7. display: block;
8. }
9. /* 重置默认字体和大小 */
10. body {
11. font-size: 0.75rem;
12. line-height: 1.5;
13. }

二、必需的js基础库
基于学习成本以及性能方面考虑，我选择的是jQuery2.0以上版本的库文件 jquery-2.1.1.min.js。
三、touch事件的掌握

touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动。
touchend：当手指从屏幕上移开时触发。
上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。
因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。
除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
originalEvent.touches：表示当前跟踪的触摸操作的Touch对象的数组。
originalEvent.targetTouchs：特定于事件目标的Touch对象的数组。
originalEvent.changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。
注意，在touchend事件发生时，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作；此时，就必须转而使用changeTouchs集合。
也就是说：touchstart和touchmove事件只可以使用originalEvent.touches对象。touchend事件只可以使用originalEvent.changeTouches对象。
四、HTML5标签、CSS3
除了上面必需的基础，多多少少也要掌握一些HTML5、CSS3方面的知识，尤其是HTML5标签的使用、CSS3过渡（transition）、CSS3动画（@-webkit-keyframes）、CSS3 3D等。
这些知识可以让我们在做无线web开发时游刃有余。比如：有些动画效果使用css3完全可以胜任，而且与js实现相比性能更优。
下面是我写的一个滑动效果的js部分：

1. ;(function($, wind, undefined) {
2. //缓存全局变量
3. var jwind = $(wind);
4. var carouselEffect = {
5. init: function() {
6. //操作容器
7. this.wrap = $('.list');
8. this.ul = this.wrap.find('ul');
9. //列表项内容宽度自适应
10. this.styleInit();
11. //事件绑定集
12. this.event();
13. },
14. //列表项内容宽度自适应
15. styleInit: function() {
16. this.ul.each(function(i, el) {
17. var ul = $(el), item = ul.find('li'), itemCount = item.length, itemWidth = jwind.width();
18. //设置列表项父层容器的宽度
19. ul.css('width', itemCount*itemWidth);
20. //设置列表项内容的宽度
21. item.css('width', itemWidth);
22. });
23. },
24. //事件绑定集
25. event: function() {
26. var that = this;
27. //窗口大小改变时列表项内容宽度自适应
28. jwind.on('resize.th', function() {
29. if (wind.timeid) clearTimeout(wind.timeid);
30. wind.timeid = setTimeout($.proxy(that.styleInit, that), 1000/60);
31. });
32. //绑定触摸事件
33. this.wrap.on('touchstart', 'li', touchstart);
34. this.wrap.on('touchmove', 'li', touchmove);
35. this.wrap.on('touchend', 'li', touchend);
36. }
37. };
38. $(function() {
39. carouselEffect.init();
40. })
41. //预定义常用的变量
42. var touch, startx, cachex, cacheulx, ul, ulx, endx, diffx;
43. //触摸开始
44. function touchstart(ev) {
45. touch = ev.originalEvent.touches[0];
46. cachex = startx = touch.clientX;
47. cacheulx = parseInt($(this).parent('ul').css('margin-left'));
48. }
49. //触摸移动
50. function touchmove(ev) {
51. //阻止浏览器的默认拖动行为
52. ev.preventDefault();
53. //计算移动距离
54. touch = ev.originalEvent.touches[0];
55. endx = touch.clientX;
56. diffx = endx - startx;
57. ulx = parseInt((ul=$(this).parent('ul')).css('margin-left'));
58. startx = endx;
59. //移动对象
60. ul.css('margin-left', ulx+diffx);
61. }
62. //触摸结束
63. function touchend(ev) {
64. var resultx, boundvalue = 50, itemCount = (ul=$(this).parent('ul')).find('li').length, itemWidth = jwind.width();
65. //手指抬起时横坐标
66. endx = ev.originalEvent.changedTouches[0].clientX;
67. //向左滑动
68. if (cachex > endx) {
69. //计算下一项的位置
70. resultx = cacheulx % itemWidth === 0 ? cacheulx-itemWidth : itemWidth;
71. resultx = resultx < -(itemCount-1)*itemWidth ? -(itemCount-1)*itemWidth : resultx;
72. //滑动一定距离则切换到下一项
73. if (cachex - endx > boundvalue) {
74. ul.animate({'margin-left': resultx}, 'fast', function() {
75. //滑动完毕读取的距离才可信
76. cacheulx = parseInt(ul.css('margin-left'));
77. });
78. }
79. //未滑动一定距离则返回到原来位置
80. else {
81. ul.animate({'margin-left': cacheulx}, 'fast', function() {
82. //滑动完毕读取的距离才可信
83. cacheulx = parseInt(ul.css('margin-left'));
84. });
85. }
86. }
87. //向右滑动
88. else {
89. //计算下一项的位置
90. resultx = cacheulx % itemWidth === 0 ? cacheulx+itemWidth : itemWidth;
91. resultx = resultx > 0  ? 0 : resultx;
92. //滑动一定距离则切换到下一项
93. if (endx - cachex > boundvalue) {
94. ul.animate({'margin-left': resultx}, 'fast', function() {
95. //滑动完毕读取的距离才可信
96. cacheulx = parseInt(ul.css('margin-left'));
97. });
98. }
99. //未滑动一定距离则返回到原来位置
100. else {
101. ul.animate({'margin-left': cacheulx}, 'fast', function() {
102. //滑动完毕读取的距离才可信
103. cacheulx = parseInt(ul.css('margin-left'));
104. });
105. }
106. }
107. }
108. })(jQuery, window);

二维码访问：

效果图：

调试 http://www.wozhuye.com/index.php?m=content&c=index&a=show&catid=7&id=275