HTML5頁面點擊和左右滑動頁面滾動

jopen 9年前發布 | 5K 次閱讀 JavaScript HTML5 

<%@ 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>

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！