html5页面点击和左右滑动页面滚动
浏览数：22 /
时间：2015年06月09日
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!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="<%=basePath%>js/jquery-1.11.0.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];
endX = touch.pageX;
}
function touchEnd(event) {
$("#img0" + showADID).hide();
showADID++;
if (showADID > 4) {
showADID = 1;
}
$("#img0" + showADID).show();
$("#spText").html("X轴移动大小：" + (startX - endX));
}
})
</script>
</head>
<body >
<form id="form1">
<span id="spText"></span>
<div style="border:solid 1px Red;" id="divADBox">
<img id="img01" height="450px" src="<%=basePath%>resources/tcode/t1.png" />
<img id="img02" height="450px" src="<%=basePath%>resources/tcode/t2.png" style="display:none;" />
<img id="img03" height="450px" src="<%=basePath%>resources/tcode/t3.png" style="display:none;" />
<img id="img04" height="450px" src="<%=basePath%>resources/tcode/t4.png" style="display:none;" />
</div>
</form>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
