Home >Web Front-end >HTML Tutorial >html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose
html5页面点击和左右滑动页面滚动_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:16:501690browse
<%@ 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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html <button>控件的点击跳转页面问题_html/css_WEB-ITnoseNext article：CSS Reset_html/css_WEB-ITnose