HTML5頁面點(diǎn)擊和左右滑動(dòng)頁面滾動(dòng)
2018-07-20 來源：open-open
<%@ 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軸移動(dòng)大小：" + (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>
標(biāo)簽： isp
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
最新資訊
熱門推薦