html5页面点击和左右滑动页面滚动-白红宇

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

阅读量：5971 次

发布时间：2019-06-19

本文共 1744 字，大约阅读时间需要 5 分钟。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%>    
        HTML5测试    
    
     <%=basePath%>js/jquery-1.11.0.min.js" 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));            }        })    
      
           
       
            
        
             
         
                  
          
           <%=basePath%>resources/tcode/t1.png"  />        
           
            <%=basePath%>resources/tcode/t2.png" style="display:none;" />        
            
             <%=basePath%>resources/tcode/t3.png" style="display:none;" />        
             
              <%=basePath%>resources/tcode/t4.png" style="display:none;" />