HTML5页面点击和左右滑动页面滚动

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轴移动大小：" + (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>

标签： isp

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:Android 淡入淡出动画xml配置

下一篇:iOS验证电话

最新资讯

热门推荐