html5页面点击和左右滑动页面滚动_html/css

html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:16:50

原创

1879人浏览过

<%@ 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% alt="html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose" >resources/tcode/t1.png"  />        <img  id="img02" height="450px" src="<%=basePath% alt="html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose" >resources/tcode/t2.png"   style="max-width:90%" />        <img  id="img03" height="450px" src="<%=basePath% alt="html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose" >resources/tcode/t3.png"   style="max-width:90%" />        <img  id="img04" height="450px" src="<%=basePath% alt="html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose" >resources/tcode/t4.png"   style="max-width:90%" />    </div>    </form></body></html>

登录后复制