iPad触摸屏幕切换滑动效果

最新推荐文章于 2024-04-22 14:22:36 发布

crurtyx

最新推荐文章于 2024-04-22 14:22:36 发布

阅读量1.5k

点赞数

文章标签： ipad function xhtml up html class

ipad对应于网页onmousedown / onmouseup的两个事件是ontouchstart / ontouchend手指触摸开始和手指触摸后离开。

怎么来判断手指移动的方向呢？我们先获取手指刚触摸时的坐标down，然后再获取手指触摸后离开时的坐标up，在对两个坐标进行想减，判断手势想那个方向移动！我们用down=event.changedTouches[0].pageX;来获取手指刚放下去的x坐标，up=event.changedTouches[0].pageX;来获取手指离开时的x坐标，这两个要分开写在两个函数里，要不然会同时执行。

先上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="keywords" content=" "/>
<meta name="description" content=" "/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
body,div,p{margin:0;padding:0;font-size:16px;color:red;}
#contain{margin:0 auto;width:600px;height:159px;position:relative;border:1px red solid;overflow:hidden;}
#big{width:1800px;height:159px;position:absolute;top:0;left:0;}
</style>
<title>鼠标点击事件</title>
</head>
<body>
<div class="contain" id="contain" ontouchstart="abc(event);"ontouchend="dd(event);"><p id="big"/>陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈陈朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱朱吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴吴</p></div>
<script type="text/javascript">
var big = document.getElementById("big");
//var contain = document.getElementById("contain");
var down = 0;
var up = 0;
function abc(event){
down=event.changedTouches[0].pageX;//获取手指刚触摸时的x坐标
}
function dd(event){
up=event.changedTouches[0].pageX;//获取手指离开时的x坐标
var offset=big.offsetLeft;
var Width_big=$('#big').width();//big宽度
var Width_contain=$('#contain').width();//contain宽度
var Width=Width_contain-Width_big;//big总是被隐藏的宽度
if (down>up&&offset>Width&&offset%Width_contain==0){
$("#big").animate({left:offset-Width_contain},1000);
}
else if(down<up&&offset<0&&offset%Width_contain==0){
$("#big").animate({left:offset+Width_contain},1000);
}
}

</script>
</body>
</html>

if语句里的offset>Width&&offset%Width_contain==0的作用为了判断对象是否移动了你想要的距离，如果没有则不会执行下面的函数。同时也解决了当你手指快速频繁滑动产生的错位现象。

所以一定要在if语句中加offset>Width&&offset%Width_contain==0才能防止因滑动过快产生的错位现象。

如果你把上面的代码粘到html并在电脑上测试，那是没用的，你要改几个地方。

1、把id="contain"的事件改为οnmοusedοwn="abc(event)" οnmοuseup="dd(event)"

2、把函数abc()的down换成down=event.clientX; 函数dd()的up换成up=event.clientX;就可以在电脑上运行了。

crurtyx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iPad触摸屏幕切换滑动效果

ipad对应于网页onmousedown / onmouseup的两个事件是ontouchstart / ontouchend手指触摸开始和手指触摸后离开。怎么来判断手指移动的方向呢？我们先获取手指刚触摸时的坐标down，然后再获取手指触摸后离开时的坐标up，在对两个坐标进
复制链接

扫一扫