<%@ 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>登入後複製
