您的位置：首页 > 其它
touch事件

2016-06-22 17:11 169 查看
包含以下知识点：

1.touch事件操作

2.运动框架

3.兼容获取style属性

4.手机端html标准格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="images/send.png" type="/image/x-icon">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
<title>test</title>

<style>
* {
margin: 0;
padding: 0;
font-size: 0.04rem;
}
body, html {
width: 100%;
height: 100%;
}
body {
height: 3rem;
}
.head {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: .2rem;
background: red;
}

</style>
</head>
<body>
<div class="head">

</div>

<script>
window.onload = function() {
var winW = document.body.clientWidth,
htmlObj = document.querySelector('html');

htmlObj.style.fontSize = ((winW<750) ? winW : 750) +'px';

var head = document.querySelector('.head');

var startX = 0,
startY = 0,
offsetX = 0,
offsetY = 0,
oldX = 0,
oldY = 0,
dir = '';//上 右 下 左

head.addEventListener('touchstart', function(e) {
var targetTouches = e.targetTouches[0];
oldX = startX = targetTouches.pageX;
oldY = startY = targetTouches.pageY;

offsetX = targetTouches.pageX - this.offsetLeft;
offsetY = targetTouches.pageY - this.offsetTop;
});
head.addEventListener('touchmove', function(e) {
e.preventDefault();//阻止页面滚动

var targetTouches = e.targetTouches[0];

var newX = targetTouches.pageX,
newY = targetTouches.pageY,
diffX = newX - oldX,
diffY = newY - oldY;

var angle = Math.atan((newX - oldX)/(newY - oldY)) * 180 / Math.PI;

if(angle > -45 && angle < 45 && newY < oldY){//上
dir = 'up';
}
if(angle > -45 && angle < 45 && newY > oldY){//下
dir = 'down';
}
if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && newX < oldX){//左
dir = 'left';
}
if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && newX > oldX){//右
dir = 'right';
}

switch(dir) {
case 'down':
this.style.top = (targetTouches.pageY - offsetY)/3 +'px';
break;
}

oldX = newX;
oldY = newY;

});
head.addEventListener('touchend', function(e) {
var targetTouches = e.targetTouches[0];

startMove(head, {'top': '0',});
});

//阻止页面滚动
/*document.addEventListener('touchmove', function(e) {
e.preventDefault();
});*/

//打印对象属性
function writeObj(obj) {
var description = "";
for (var i in obj) {
var property = obj[i];
description += i + " = " + property + "\n";
}
return description;
}

//touch框架(待完善)
function touchFunc(obj,type,func) {
//滑动范围在5x5内则做点击处理，s是开始，e是结束
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var sTime = 0, eTime = 0;
type = type.toLowerCase();

obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.sx;
init.ey = init.sy;
if(type.indexOf("start") != -1) func();
}, false);

obj.addEventListener("touchmove",function() {
event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if(type.indexOf("move")!=-1) func();
}, false);

obj.addEventListener("touchend",function() {
var changeX = init.sx - init.ex;
var changeY = init.sy - init.ey;
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
//左右事件
if(changeX > 0) {
if(type.indexOf("left")!=-1) func();
}else{
if(type.indexOf("right")!=-1) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
//上下事件
if(changeY > 0) {
if(type.indexOf("top")!=-1) func();
}else{
if(type.indexOf("down")!=-1) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
//点击事件，此处根据时间差细分下
if((eTime - sTime) > 300) {
if(type.indexOf("long")!=-1) func(); //长按
}
else {
if(type.indexOf("click")!=-1) func(); //当点击处理
}
}
if(type.indexOf("end")!=-1) func();
}, false);
};

//运动框架
function startMove(obj, json, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {

var bStop = true;
for (var attr in json) {

var cur = 0;

if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}

var speed = (json[attr] - cur) / 6;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (cur != json[attr]) bStop = false;

if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;

} else {
obj.style[attr] = cur + speed + 'px';
}

}

if (bStop)
{
clearInterval(obj.timer);

if (fnEnd) fnEnd();
}

},
30);
}

//兼容ie获取style属性
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}

}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航