Rumah > Artikel > hujung hadapan web > html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose
html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 09:16:501654semak imbas
<%@ 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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html <button>控件的点击跳转页面问题_html/css_WEB-ITnoseArtikel seterusnya：CSS Reset_html/css_WEB-ITnose