一掺栅、設(shè)備事件
移動端事件都要在head里面設(shè)置：<meta ?name="viewport" ?content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
獲取移動端設(shè)備的尺寸：screen.width,screen.height
手機(jī)屏幕發(fā)生翻轉(zhuǎn)時(shí)觸發(fā)的事件orientationchange
我們的手機(jī)是有方向的扎谎，有一個(gè)事件可以捕獲設(shè)備的方向具篇，設(shè)置層面的粘室，只要使屏幕旋轉(zhuǎn)就可以觸發(fā)编矾。
orientation方向
window.addEventListener("orientationchange",function(event) {
var ? ?ev=event||window.event;
//當(dāng)前的方向
div.innerHTML=window.orientation;//在手機(jī)屏幕上顯示當(dāng)前的方向
//方向改變
switch(window.orientation) {
case ?0:
div.style.backgroundColor="blueviolet"
break;
case ? 90:
div.style.backgroundColor="deeppink"
break;
case -90:
div.style.backgroundColor="orangered"
break;
default:
break;
}
},false)
設(shè)備方向事件deviceOrientationEvent
window.addEventListener("deviceorientation",function(event) {
var ? ev=event||window.event;
div.innerHTML="Alpha:"+event.alpha+"<br/>Beta:"+event.beta+"<br/>Gamma:"+event.gamma;
//alpha代表z軸方向變化岖寞，范圍：0~360
//beta代表x軸方向變化椒舵，范圍：-180~180
//gamma代表y軸方向變化，范圍：-90~90
},false)
二磨澡、觸屏事件
//觸屏事件碗啄，觸摸事件
//1.觸摸開始時(shí)觸發(fā)的事件
div.addEventListener("touchstart",function(event) {
var ? ?ev=event||window.event;
//console.log(ev);
//觸摸開始，讓div隨機(jī)變色
function ? ? ?random(max,min) {
return ? ? ?parseInt(Math.random()*(max-min+1)+min);
}
div.style.backgroundColor="rgb("+random(255,0)+","+random(255,0)+","+random(255,0)+")";
},false)
//2.觸摸時(shí)進(jìn)行移動的事件
div.addEventListener("touchmove",function(event) {
var ? ? ev=event||window.event;
//阻止默認(rèn)事件
ev.preventDefault();
var ? x=ev.touches[0].clientX;
var ? y=ev.touches[0].clientY;
console.log("觸摸移動", x, y)
},false)
//3.觸摸結(jié)束時(shí)觸發(fā)事件
div.addEventListener("touchend",function(){
console.log("觸摸結(jié)束")
},false)
//4.觸摸終止 touchcancel突發(fā)事件結(jié)束觸摸
/*touches屏幕上所有觸摸點(diǎn)的集合
* targetTouches目標(biāo)對象上的觸摸點(diǎn)的集合
* changedTouches改變的觸摸點(diǎn)的集合
*/
var ? div1=document.getElementById("div1");
var ? ?div2=document.getElementById("div2");
div1.addEventListener("touchstart",function(event) {
var ? ev=event||window.event;
div1.innerHTML="tl:"+ev.touches.length+"tal:"+ev.targetTouches.length+"cL:"+ev.changedTouches.length;
},false)
div2.addEventListener("touchstart",function(event) {
var ? ?ev=event||window.event;
div2.innerHTML="tl:"+ev.touches.length+"tal:"+ev.targetTouches.length+"cL:"+ev.changedTouches.length;
},false)
三稳摄、手勢事件
//手勢事件與觸屏事件很像
//gesturestart ? ?touchstart
//gesturechange ? ?touchmove
//gestureend ? ?touchend?
//rotation 與 scale 是手勢相對于觸屏事件新加的屬性稚字。
var ? ?div1=document.getElementById("div1");
div1.addEventListener("gesturestart",function(ev) {
//alert("哈哈");
},false);
div1.addEventListener("gesturechange",function(ev) {
ev.preventDefault();
var ? r=ev.rotation;
var ? ?s=ev.scale;
//div1.style.transform = "rotate(" + r + "deg)";
div1.style.transform="scale("+s+")";
},false);
四、touch.js
touch.js既支持移動端厦酬，也支持PC端
要引入<script? type="text/javascript"? src="js/touchjs.min(1).js"></script>
使用touch.js為div添加一個(gè)輕拍手勢,touch.on(),tap胆描，三個(gè)參數(shù)，第一個(gè)參數(shù) 對象仗阅，為誰添加就傳入誰昌讲；第二個(gè)參數(shù) 手勢名稱；第三個(gè)參數(shù) 回調(diào)函數(shù)减噪。
var ? touchDiv=document.getElementById("touchDiv");
touch.on(touchDiv, "tap", function(ev) {
//console.log(ev);
//按照輕拍的規(guī)律觸摸了div就可以執(zhí)行回調(diào)函數(shù)的代碼
touchDiv.innerHTML = ev.type;
touchDiv.style.backgroundColor="red";
});
//可以直接傳一個(gè)選擇器字符串剧蚣，內(nèi)部封裝了querySelector，不需要獲取元素
touch.on("#touchDiv div","tap",function(ev){
console.log(ev);
this.style.backgroundColor="yellow";
//this.innerHTML="哈哈"
});
//hold長按
touch.on("#touchDiv","hold",function(ev){
this.innerHTML=ev.type;
})旋廷；
//drag拖拽
var ? x=0;
var ? ?y=0;
var ? disX=0;
var ? ?disY=0;
touch.on("#touchDiv","drag",function(ev) {
//position.x鸠按，position.y觸摸點(diǎn)距離可視化范圍的距離
//console.log(ev.position.x, ev.position.y);
console.log(ev.x, ev.y);
//x = disX + ev.position.x-touchDiv.offsetWidth/2;
//y = disY + ev.position.y-touchDiv.offsetHeight/2;
//ev.x，ev.y 參照自己原有位置的偏移量
x=disX+ev.x;
y=disY+ev.y;
this.style.transform="translate("+x+"px,"+y+"px)";
});
touch.on("#touchDiv","dragend",function() {
disX=x;
disY=y;
})
//rotate
var ? angel=0;
touch.on("#touchDiv","touchstart",function(ev) {
ev.startRotate();
})
touch.on("#touchDiv","rotate",function(ev) {
//console.log("coco")
//console.log(ev.rotation);
var ? rotate=angel+ev.rotation;
this.innerHTML=rotate;
//fingerStatus手指的狀態(tài)
//判斷手指是不是松了
if(ev.fingerStatus=="end") {
angel=rotate;}
this.style.transform="rotate("+rotate+"deg)";
})
//pinch
//初始比例
var ? initScale=1;
//新比例
var ?newScale=0;
touch.on(document,"touchmove",function(ev) {
ev.preventDefault();
})
touch.on("#touchDiv","pinch",function(ev) {
var ? scale=ev.scale-1;
newScale=scale+initScale;
if(newScale<=0.5) {
newScale=0.5;
}
if(newScale>=2) {
newScale=2;
}
//if (ev.fingerStatus == "end") {
//initScale = newScale;
//}
this.style.transform="scale("+newScale+")";
});
touch.on("#touchDiv","pinchend",function() {
initScale=newScale;
});
五饶碘、swiper.js
<script ? ? ?src="js/swiper-3.4.0.min.js"></script>
