移动端学习

移动端事件

第一天：

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.width
var 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;
}
}