Heim > Artikel > Web-Frontend > html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose
html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:16:501653Durchsuche
<%@ 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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html <button>控件的点击跳转页面问题_html/css_WEB-ITnoseNächster Artikel：CSS Reset_html/css_WEB-ITnose