无线web开发之前要做一些准备工作:
一、必需的reset样式库
1、其中的重点是盒模型box-sizing:由原来pc端的content-box改为border-box。
- *, *:before, *:after {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
2、设定root元素的字体大小,便于子元素rem单位的设置。
- html { font-size: 100%; }
3、使Chrome使用小于12px的字体。
- *, *:before, *:after {
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- text-size-adjust: 100%;
- }
4、去除点击元素后的高亮效果。
- *, *:before, *:after {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
5、去除焦点元素周围的虚线。
- *:focus {
- outline: none;
- }
6、其余样式reset等同pc端的样式reset。
- h1, h2, h3, h4, h5, h6 {
- font-size: 100%;
- font-weight: normal;
- }
- /* 消除图片下方3像素空白 */
- img {
- display: block;
- }
- /* 重置默认字体和大小 */
- body {
- font-size: 0.75rem;
- line-height: 1.5;
- }
基于学习成本以及性能方面考虑,我选择的是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部分:
- ;(function($, wind, undefined) {
- //缓存全局变量
- var jwind = $(wind);
- var carouselEffect = {
- init: function() {
- //操作容器
- this.wrap = $('.list');
- this.ul = this.wrap.find('ul');
- //列表项内容宽度自适应
- this.styleInit();
- //事件绑定集
- this.event();
- },
- //列表项内容宽度自适应
- styleInit: function() {
- this.ul.each(function(i, el) {
- var ul = $(el), item = ul.find('li'), itemCount = item.length, itemWidth = jwind.width();
- //设置列表项父层容器的宽度
- ul.css('width', itemCount*itemWidth);
- //设置列表项内容的宽度
- item.css('width', itemWidth);
- });
- },
- //事件绑定集
- event: function() {
- var that = this;
- //窗口大小改变时列表项内容宽度自适应
- jwind.on('resize.th', function() {
- if (wind.timeid) clearTimeout(wind.timeid);
- wind.timeid = setTimeout($.proxy(that.styleInit, that), 1000/60);
- });
- //绑定触摸事件
- this.wrap.on('touchstart', 'li', touchstart);
- this.wrap.on('touchmove', 'li', touchmove);
- this.wrap.on('touchend', 'li', touchend);
- }
- };
- $(function() {
- carouselEffect.init();
- })
- //预定义常用的变量
- var touch, startx, cachex, cacheulx, ul, ulx, endx, diffx;
- //触摸开始
- function touchstart(ev) {
- touch = ev.originalEvent.touches[0];
- cachex = startx = touch.clientX;
- cacheulx = parseInt($(this).parent('ul').css('margin-left'));
- }
- //触摸移动
- function touchmove(ev) {
- //阻止浏览器的默认拖动行为
- ev.preventDefault();
- //计算移动距离
- touch = ev.originalEvent.touches[0];
- endx = touch.clientX;
- diffx = endx - startx;
- ulx = parseInt((ul=$(this).parent('ul')).css('margin-left'));
- startx = endx;
- //移动对象
- ul.css('margin-left', ulx+diffx);
- }
- //触摸结束
- function touchend(ev) {
- var resultx, boundvalue = 50, itemCount = (ul=$(this).parent('ul')).find('li').length, itemWidth = jwind.width();
- //手指抬起时横坐标
- endx = ev.originalEvent.changedTouches[0].clientX;
- //向左滑动
- if (cachex > endx) {
- //计算下一项的位置
- resultx = cacheulx % itemWidth === 0 ? cacheulx-itemWidth : itemWidth;
- resultx = resultx < -(itemCount-1)*itemWidth ? -(itemCount-1)*itemWidth : resultx;
- //滑动一定距离则切换到下一项
- if (cachex - endx > boundvalue) {
- ul.animate({'margin-left': resultx}, 'fast', function() {
- //滑动完毕读取的距离才可信
- cacheulx = parseInt(ul.css('margin-left'));
- });
- }
- //未滑动一定距离则返回到原来位置
- else {
- ul.animate({'margin-left': cacheulx}, 'fast', function() {
- //滑动完毕读取的距离才可信
- cacheulx = parseInt(ul.css('margin-left'));
- });
- }
- }
- //向右滑动
- else {
- //计算下一项的位置
- resultx = cacheulx % itemWidth === 0 ? cacheulx+itemWidth : itemWidth;
- resultx = resultx > 0 ? 0 : resultx;
- //滑动一定距离则切换到下一项
- if (endx - cachex > boundvalue) {
- ul.animate({'margin-left': resultx}, 'fast', function() {
- //滑动完毕读取的距离才可信
- cacheulx = parseInt(ul.css('margin-left'));
- });
- }
- //未滑动一定距离则返回到原来位置
- else {
- ul.animate({'margin-left': cacheulx}, 'fast', function() {
- //滑动完毕读取的距离才可信
- cacheulx = parseInt(ul.css('margin-left'));
- });
- }
- }
- }
- })(jQuery, window);
二维码访问:
效果图:
调试 http://www.wozhuye.com/index.php?m=content&c=index&a=show&catid=7&id=275