触屏拉动页面

来源：互联网发布：java编写一个日历程序编辑：程序博客网时间：2024/05/16 11:12

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置

添加事件

document.addEventListener('touchstart', touchstart, false);//手指刚接触
document.addEventListener('touchmove', touchMoveFunc, false);//手指滑动
document.addEventListener('touchend', touchEndFunc, false);//手指离开

╮(╯▽╰)╭

<!DOCTYPE html>
<html>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>

<script type="text/javascript" >

var startY = 0;//初次触屏 XY轴
var startX = 0;

var endY = 0; //结束时
var endX = 0;

var startDate = "";//点击屏幕时间开始和结束
var endDate = "";
var ms = 0; //使用秒数

var startObj = ""; //操作的对象开始变化结束
var moveObj = "";
var endObj = "";

var sele ="";

var jsob = new Array();
function touchstart(e){
startObj = mouth(e);
startDate = new Date().getTime();
var shou = e.touches[0];
startY = shou.pageY;
startX = shou.pageX;
print();
}

function touchMoveFunc(e){

//alert(objMove);
moveObj = mouth(e);

var shou = e.touches[0];
endY = shou.pageY;
endX = shou.pageX;
print();
moveIng();

}

function touchEndFunc(e){

endObj = mouth(e);
endDate = new Date().getTime();
ms = (endDate-startDate)/1000;
var goType = "";

if(endY==0&&endX==0){
goType = "click";
}else{
goType = "滑动";
}

print();
endIng();
into();
}

function print(){
$("#shou").html("XZ:"+startX+ " YZ:"+startY+" DT:"+startDate);
$("#shou2").html("XZ:"+endX+ " YZ:"+endY);

}

//获取鼠标滑动时所在id
function mouth(e){

var ex,objX,th;
ex=e||window.event;
objX = ex.srcElement || ex.target || ex;
th=objX.id;
return th;
}

function moveIng(){
var obbb = "";
if(sele==""){
obbb = document.getElementById(moveObj);

}else{
obbb = document.getElementById(sele);
}
if(jsob[moveObj]==null){
jsob[moveObj] = 0;
}

obbb.style.webkitTransform = 'translate(' + 0+ 'px, ' + (jsob[moveObj]+ endY-startY) + 'px)';

// moveObj.top = startY - endY;
}

function endIng(){
var vsudu = (endY-startY)/ms;
var aerf = (vsudu-0)/ms;
//alert("aerf:"+aerf)
var s = aerf*0.5*ms*ms+vsudu*ms;//加速度运动距离

if(jsob[moveObj]==null){
jsob[moveObj] = 0;

}else{
jsob[moveObj] =jsob[moveObj]+ endY-startY;

}

var obbb = "";
if(sele==""){
obbb = document.getElementById(moveObj);

}else{
obbb = document.getElementById(sele);
}

obbb.style.webkitTransition="0.2s";
//alert(jsob[moveObj]+ (s-endY-startY));
obbb.style.webkitTransform = 'translate(' + 0+ 'px, ' + (jsob[moveObj]+ (s-endY+startY)) + 'px)';

// moveObj.top = startY - endY;
}

function into(){
startY = 0;//初次触屏 XY轴
startX = 0;

endY = 0; //结束时
endX = 0;

startDate = "";//点击屏幕时间开始和结束
endDate = "";
ms = 0; //使用秒数

startObj = ""; //操作的对象开始变化结束
moveObj = "";
endObj = "";
}

$(function(){
var obj = document.getElementById("kj");
obj.addEventListener('touchstart', touchstart, false);//手指刚接触
obj.addEventListener('touchmove', touchMoveFunc, false);//手指滑动
obj.addEventListener('touchend', touchEndFunc, false);//手指离开

});

</script>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<div id="kj" style="border: solid red 1px;width: 80;height: 500px;margin: auto;" >
<div id="resu" style="border: solid 4px bisque;background-color: bisque;height: 300px;" draggable="true" >
1号：<h1 id="shou" ></h1>
2号：<h1 id="shou2" ></h1>
3号：<h1 id="shou3" ></h1>
</div>
<div id="xxxx" style="border: solid 4px bisque;background-color: bisque;height: 300px;margin-top: 400px;" draggable="true" >

</div>
</div>

</body>
</html>

写了之后发现然并。手机上不能用这个拖动，浏览器不支持，醉了

0 0