HTML5+CSS3从入门到精通之HTML5页面点击和左右滑动页面滚动-职坐标

HTML5+CSS3从入门到精通之HTML5页面点击和左右滑动页面滚动

沉沙 2018-11-16 来源：阅读 1829 评论 0

摘要：本篇教程探讨了HTML5+CSS3从入门到精通之HTML5页面点击和左右滑动页面滚动，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5+CSS3从入门到精通之HTML5页面点击和左右滑动页面滚动，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

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