移动端学习

来源：互联网发布：聊天机器人对话数据库编辑：程序博客网时间：2024/06/06 19:05

移动端事件

第一天：

e.preventDefault();阻止默认事件

阻止掉document.touchstart事件，可以解决以下两个问题：    1.阻止页面上的文字被选中  可以通过阻止冒泡，是某个元素里边的文字被选中    2.阻止页面上的菜单系统

隐患：页面上的所有滚动条失效
ios上的橡皮筋效果可以通过阻止默认事件实现，

阻止冒泡

e.stopPropagation();

事件点透

PC端鼠标事件在移动端也可以使用，但是有300ms的延迟1.在移动端PC事件邮300ms的延迟，2.我们点击了以后，浏览器会记录点击下去的坐标，然后在300ms以后执行事件；3.在300ms以后，在该坐标找到现在在这个未知的元素，执行事件

解决方法：

 1.阻止默认事件（部分安卓机型不支持） 2.不在移动端使用鼠标事件，不用a标签做页面跳转

获取手指信息

e.thouchs //当前屏幕上的手指列表e.tragetTouches //当前元素上的手指列表e.changedThouches //触发当前事件的手指列表

第二天：

 简易的幻灯片

第三天：

移动端适配

(function(window){            var html = document.querySelector('html');            var width = html.getBoundingClientRect().width;            html.style.fontSize = width / 16 + 'px';})(window)

二.通过viewPort解决

1.页面宽度定死
2.动态设置viewPort 把可视宽度设置为320

width = [pixe_value | device-width],//viewPort的宽度
initial-scale = float_value, //初始化缩放比例
minimum-scale = float_value,//最小缩放比例
maximun-scale = float_value,//最大缩放比例
user-scalable = [yes | no] //是否允许缩放

    (function(window){        //设置了viewPort 默认width=device-width 不设置viewPort width默认宽度是980        var width = window.screen.width;//获取屏幕宽度         var targetW = 320; //想要固定的宽度        var scale =  width / targetW; //得到像素比         var meta = document.createElement('meta');        meta.setAttribute('name','viewport');        // 使用像素比设置viewPort 缩放比例        meta.setAttribute('content',        'width=device-width,user-scalable=no,initial-scale='+scale+'minimum-scale='+scale+'maximum-scale='+scale);        document.heade.appendChild(meta);    })(window)

三。横竖屏切换

1.rem 横竖屏切换

(function(window){
setRem();
function setRem(){//设置html字体大小
var html = document.querySelector(‘html’);
var width = html.getBoundingClientRect().width;
html.style.fontSize = width / 16 + ‘px’;
}
// orientationchage 横竖屏切换事件
window.addEventListener(‘orientationchange’,function(){
setRem();
})
})(window)

2.viewPort 横竖屏切换

在竖屏的时候 window.orientation = 90 || -90;
在横屏屏的时候 window.orientation = 0 || 180;

var width = (window.orientation == 90||window.orientation == -90)? window.screen.height: window.screen.widthvar targetW = 320; var scale = width / targetW;var meta = document.createElement('meta');alert(width);meta.setAttribute('name', 'viewport');meta.setAttribute('content', "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale);document.head.appendChild(meta);window.addEventListener(    "orientationchange",     function() {        setTimeout(            function() {                window.location.href = window.location.href;            },            1000        );    });

四.取图大小: 注：如果说在table里边给某个元素设置positive定位的话，在IE下屏幕滚动的时候会有卡屏的现象
// window.devicePixelRatio 像素比
// 用几个像素的大小显示一像素的内容
// 设计图的宽度最好都在750以上

五.css3D: 常用属性
rotate
rotateX
rotateY
rotateZ
translate
perspective： 300px; 设置景深。
Math.tan(弧度) 正切 =》对边/领边; 弧度=角度*PI/180;
邻边 =》对边*正切
“`

六。手写3d桌面整理

一.HTML结构

1.一个包裹层
2.页面包含一个头部(header)
3.一个内容部分 (list)

子列表(li>p*3>span*4)
一个底部

二.CSS部分

使用百分比布局
1.布局代码，省略
2.3d显示代码

.list 设置perspective 属性创建一个3d显示空间
.item 设置浮动设置position:relative; 显示每一列设置transform-style: preserve-3d;设置过度为3d
p设置position:absolute; 一列布局的包裹层旋转角度使用js计算后设置
span 设置display为block 快100% 高根据行数这是行/h*100%

三.js部分

1.禁止默认事件
2.设置布局属性 rotateZ (旋转外角)

/*设置旋转*/var n = 3;//有几个面var deg = 360/n;需要旋转的角度(外角)var z = (Math.tan( (180-deg)/2*Math.PI/180)*元素宽/2).toFixed(4);var style = document.querySelector('#style');str = '';for(var i = 1 ;i < .item.length; i++){     str+=' .item p:nth-of-type('+(i)+'){-webkit-transform: rotateY('+(i-1)*deg+'deg) translateZ('+z+'px);transform: rotateY('+(i-1)*deg+'deg) translateZ('+z+'px); transform-origin:center center '+0+'px;}';}style.innerHTML += str;<!-- 注：为了解决iOS小旋转基点的问题 在.item上设置z轴后移z像素 子元素p设置z轴前移z像素 -->

3.设置touch事件

var item = document.querySelectorAll('.item');//给每个item设置rotate 方便后期获取      for(var i = 0; i<item.length;i++){            cssTransform(item[i],"translateZ",-z);            cssTransform(item[i],"rotateY",0);        }    var startX =0;//手指初始屏幕左边    var satrtPointe=0;//初始旋转角度    list.addEventListener('touchstart',function(e){        for(var i=0;i<item.length;i++){            item[i].style.transition="none";        }        var touch = e.changedTouches[0];        startX = touch.pageX;        satrtPointe=cssTransform(item[0],"rotateY");    });    list.addEventListener('touchmove',function(e){        var touch = e.changedTouches[0];        var dis = startX - touch.pageX;         nowPointe = dis/htmlReact.width*deg;        for(var i=0;i<item.length;i++){            cssTransform(item[i],"rotateY",satrtPointe-nowPointe);        }    });    list.addEventListener('touchend',function(e){        //得到当前旋转角度        var nowDeg = cssTransform(item[0],"rotateY");        //通过四舍五入判断得到旋转的系数        var now = (-Math.round(nowDeg/deg));        //now = now < 0? 3+now:now; 系数*旋转教的(deg)等于最终的位置        console.log(now,-now*deg,nowDeg);        for(var i = 0; i<item.length;i++){            item[i].style.transition = "transform .5s";            cssTransform(item[i],"rotateY",-now*deg);        }    });    // cssTransform兼容写法    function cssTransform(el,attr,val) {        if(!el.transform){            el.transform = {};        }        if(arguments.length>2) {            el.transform[attr] = val;            var sVal = "";            for(var s in el.transform){                switch(s) {                    case "rotate":                    case "rotateX":                    case "rotateY":                    case "rotateZ":                         case "skewX":                    case "skewY":                        sVal +=s+"("+el.transform[s]+"deg) ";                        break;                    case "translateX":                    case "translateY":                    case "translateZ":                        sVal +=s+"("+el.transform[s]+"px) ";                        break;                    case "scaleX":                    case "scaleY":                    case "scale":                        sVal +=s+"("+el.transform[s]+") ";                        break;                  }                el.style.transform = sVal;                el.style.WebkitTransform = sVal;            }        } else {            val  = el.transform[attr];            if(typeof val == "undefined" ) {                if(attr == "scale" || attr == "scaleX" || attr == "scaleY"  ) {                    val = 1;                } else {                    val = 0;                }            }            return val;        }    }

0 0