无线端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.   
6. /* 消除图片下方3像素空白 */  
7. img {  
8.     display: block;  
9. }  
10.   
11. /* 重置默认字体和大小 */  
12. body {  
13.     font-size: 0.75rem;  
14.     line-height: 1.5;  
15. }  

二、必需的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.   
39.     $(function() {  
40.         carouselEffect.init();  
41.     })  
42.   
43.     //预定义常用的变量  
44.     var touch, startx, cachex, cacheulx, ul, ulx, endx, diffx;  
45.   
46.     //触摸开始  
47.     function touchstart(ev) {  
48.         touch = ev.originalEvent.touches[0];  
49.         cachex = startx = touch.clientX;  
50.         cacheulx = parseInt($(this).parent('ul').css('margin-left'));  
51.     }  
52.   
53.     //触摸移动  
54.     function touchmove(ev) {  
55.         //阻止浏览器的默认拖动行为  
56.         ev.preventDefault();  
57.         //计算移动距离  
58.         touch = ev.originalEvent.touches[0];  
59.         endx = touch.clientX;  
60.         diffx = endx - startx;  
61.         ulx = parseInt((ul=$(this).parent('ul')).css('margin-left'));  
62.         startx = endx;  
63.         //移动对象  
64.         ul.css('margin-left', ulx+diffx);  
65.     }  
66.   
67.     //触摸结束  
68.     function touchend(ev) {  
69.         var resultx, boundvalue = 50, itemCount = (ul=$(this).parent('ul')).find('li').length, itemWidth = jwind.width();  
70.         //手指抬起时横坐标  
71.         endx = ev.originalEvent.changedTouches[0].clientX;  
72.         //向左滑动  
73.         if (cachex > endx) {  
74.             //计算下一项的位置  
75.             resultx = cacheulx % itemWidth === 0 ? cacheulx-itemWidth : itemWidth;  
76.             resultx = resultx < -(itemCount-1)*itemWidth ? -(itemCount-1)*itemWidth : resultx;  
77.             //滑动一定距离则切换到下一项  
78.             if (cachex - endx > boundvalue) {  
79.                 ul.animate({'margin-left': resultx}, 'fast', function() {  
80.                     //滑动完毕读取的距离才可信  
81.                     cacheulx = parseInt(ul.css('margin-left'));  
82.                 });  
83.             }  
84.             //未滑动一定距离则返回到原来位置  
85.             else {  
86.                 ul.animate({'margin-left': cacheulx}, 'fast', function() {  
87.                     //滑动完毕读取的距离才可信  
88.                     cacheulx = parseInt(ul.css('margin-left'));  
89.                 });  
90.             }  
91.         }  
92.         //向右滑动  
93.         else {  
94.             //计算下一项的位置  
95.             resultx = cacheulx % itemWidth === 0 ? cacheulx+itemWidth : itemWidth;  
96.             resultx = resultx > 0  ? 0 : resultx;  
97.             //滑动一定距离则切换到下一项  
98.             if (endx - cachex > boundvalue) {  
99.                 ul.animate({'margin-left': resultx}, 'fast', function() {  
100.                     //滑动完毕读取的距离才可信  
101.                     cacheulx = parseInt(ul.css('margin-left'));  
102.                 });  
103.             }  
104.             //未滑动一定距离则返回到原来位置  
105.             else {  
106.                 ul.animate({'margin-left': cacheulx}, 'fast', function() {  
107.                     //滑动完毕读取的距离才可信  
108.                     cacheulx = parseInt(ul.css('margin-left'));  
109.                 });  
110.             }  
111.         }  
112.     }  
113. })(jQuery, window);  

二维码访问：

效果图：

 

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

转载于:https://my.oschina.net/u/3147332/blog/807026