移动web js触屏事件 按下 松开 滑动

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var div = document.getElementById("div");

//touchstart类似mousedown

div.ontouchstart = function(e){

//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，从而可以通过touches获取多点触控的每个触控点

//由于我们只有一点触控，所以直接指向[0]

var touch = e.touches[0];

//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY

var x = touch.clientX;

var y = touch.clientY;

};

//touchmove类似mousemove

div.ontouchmove = function(e){

//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等

e.preventDefault();

};

//touchend类似mouseup

div.ontouchup = function(e){

//nothing to do

};

2

3

4

5

6

7

8

9

10

11

<script type="text/javascript">

var u = $(‘#roll‘);

function tmove(evet){

var touch = evet.touches[0];

var x = touch.clientX;

var y = touch.clientY;

var left = $("#roll").css("left");

$("#roll").animate({left:"-264px"},1000);

evet.preventDefault();

}

</script>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

var down = 0;

var up = 0;

var index=0;

var w = 64;

function tstart(event)

{

down=event.changedTouches[0].pageX;//获取手指刚触摸时的x坐标

}

function tend(event)

{

up=event.changedTouches[0].pageX;//获取手指离开时的x坐标

ul_obj = $("#roll");

if(down>up)

{//向左

$("#roll").animate({left:(index+"px")},1000);

index = index-64<=-180?-180:index-w;

}

else if(down<up)

{//向右

$("#roll").animate({left:((index+w)+"px")},1000);

index = index+64>0?0:index+w;

}

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

$("input").attr("value","");

3.2 ) setIntervar(function（）{ }，1000) 设置自动轮播图

setInterval(function (){ 

if (i > $(‘.img ul li img‘).length - 2) 

{

i = 0;

$(‘.dot a‘).removeClass(‘at‘).eq(i).addClass(‘at‘); 

}

else{

i++;

$(‘.dot a‘).removeClass(‘at‘).eq(i).addClass(‘at‘);

}

$(‘.img ul‘).animate({left:-300*i},1000)

},2000);

3.3 ）setTimeout(function(){},1000) 设置一定时间后触发事件

setTimeout(function (){ 

$(‘#feedOk‘).hide();

$("#read a").html(“下载成功！”);

document.location.href="index.html";

},2000);

<a href="javascript:history.back()" class="back"></a>