您的位置：首页 > Web前端 > HTML5

HTML5移动应用左右滑动touchmove touchmove touchend 实例

2013-09-11 16:51 375 查看

也是刚开始接触移动前端，大虾别喷

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<title>HTML5测试</title>
<script src="/Content/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var startX, startY, endX, endY;
var showADID = 1;
document.getElementById("divADBox").addEventListener("touchstart", touchStart, false);
document.getElementById("divADBox").addEventListener("touchmove", touchMove, false);
document.getElementById("divADBox").addEventListener("touchend", touchEnd, false);
function touchStart(event) {
var touch = event.touches[0];
startY = touch.pageY;
startX = touch.pageX;
}
function touchMove(event) {
var touch = event.touches[0];
//endY = (startY - touch.pageY);
endX = touch.pageX;
}
function touchEnd(event) {
$("#img0" + showADID).hide();
showADID++;
if (showADID > 4) {
showADID = 1;
}
if ((startX - endX) > 100) {
$("#img0" + showADID).show();
}
$("#spText").html("X轴移动大小：" + (startX - endX));
}
})
</script>
</head>
<body >
<form id="form1">
<div style="border:solid 1px Red;" id="divADBox">
<span id="spText">X轴移动大小：0</span>
<img id="img01" src="/Content/Images/1.gif"  />
<img id="img02" src="/Content/Images/2.gif" style="display:none;" />
<img id="img03" src="/Content/Images/3.gif" style="display:none;" />
<img id="img04" src="/Content/Images/4.gif" style="display:none;" />
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航