HTML判断手指滑动

最新推荐文章于 2023-07-18 08:28:14 发布
最新推荐文章于 2023-07-18 08:28:14 发布
阅读量409 收藏 1
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40463469/article/details/105900379
版权

HTML判断手指滑动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<style type="text/css">
		* {
			touch-action: pan-y;
		}
	</style>
	<body>
	</body>
	<script type="text/javascript">
		var windowHeight = $(window).height(),
			$body = $("body");
		$body.css("height", windowHeight); //重要代码
		$("body").on("touchstart", function(e) {
			e.preventDefault();
			startX = e.originalEvent.changedTouches[0].pageX,
				startY = e.originalEvent.changedTouches[0].pageY;
		});
		$("body").on("touchmove", function(e) {
			e.preventDefault();
			moveEndX = e.originalEvent.changedTouches[0].pageX,
				moveEndY = e.originalEvent.changedTouches[0].pageY,
				X = moveEndX - startX,
				Y = moveEndY - startY;

			if (Math.abs(X) > Math.abs(Y) && X > 0) {
				console.log('left 2 right');
			} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
				console.log('right 2 left');
			} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
				console.log('top 2 bottom');

			} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
				console.log('bottom 2 top');

			} else {
				console.log('just touch');

			}
		});
	</script>
</html>
Ka、
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5手机端手指滑动上拉加载代码
02-23
HTML5手机端手指滑动上拉加载代码HTML5手机端手指滑动上拉加载代码
php滑动轮播效果,js实现移动端手指滑动轮播图效果
weixin_32312081的博客
03-11 149
本文主要为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。如下所示：Documenthtml{height:100%;}body{width: 100%;height:100%;margin:0;overflow: hidden;}.wrap{position: relative;overflow: hidd...
html5 手指触摸滑动事件
panyi2011的专栏
12-24 1356
废话不说，看代码 $(document).ready(function(){ var startX,startY,endX,endY var scrollTopVal=0; //左右滑动请自行修改 //假定接受手指触摸事件的Dom对象id是"touchBox" document.getElementByIdx_x("touchBox").addEventListener("touch
html5左侧滑动事件,html5 手指触摸滑动事件代码(基于jquery)
weixin_35215225的博客
05-30 293
$(document).ready(function(){var startX,startY,endX,endYvar scrollTopVal=0; //左右滑动请自行修改//假定接受手指触摸事件的Dom对象id是"touchBox"document.getElementByIdx_x("touchBox").addEventListener("touchstart", touchStart, ...
手机端滑动事件监听
08-27
手机端滑动事件监听 简单的JS
Qtablewidget和Qtableview实现手指滑动
12-09
用在嵌入式QT或者安卓QT,判断手指滑动方向,来实现手指滑动浏览,并显示自定义滑动条,滑动条可以支持上色,包含两个QtableWidget和QtableView示例,都可以用,文章链接:https://www.cnblogs.com/lifexy/p/14111572.html
HTML5手机端手指滑动上拉加载特效代码
03-20
HTML5手机端手指滑动上拉加载特效代码是现代网页开发中的一个重要技术，它极大地提升了移动设备用户体验。在本文中，我们将深入探讨这个特效的工作原理、实现方式以及它在手机端网页开发中的应用。 首先，HTML5是超...
html5触摸事件判断滑动方向的实现
09-28
本文主要介绍如何使用HTML5的触摸事件来判断用户滑动的方向。 首先，我们需要了解`TouchEvent`事件类型，它是一类用来描述用户手指在触摸平面（如触摸屏、触摸板等）上的状态变化。每个`Touch`对象代表一个触点，...
html5触屏手指滑动响应式幻灯片切换代码
11-03
在这个"html5触屏手指滑动响应式幻灯片切换代码"中，我们主要关注的是如何利用HTML5特性创建一个适应手机触屏操作的幻灯片切换效果。这样的功能对于现代网站设计至关重要，因为它可以提供优秀的用户体验，尤其是在...
jQuery手机端商品手指滑动切换代码
06-24
"jQuery手机端商品手指滑动切换代码"正是为了满足这一需求而设计的一款高效、实用的特效代码。它使得用户可以通过简单的手指滑动操作，在手机屏幕上流畅地查看商品的多张图片，提升浏览的便捷性和乐趣。 首先，我们...
html页面在手机端左右滑动,HTML5 移动端的上下左右滑动问题
weixin_39966053的博客
06-04 1072
在移动端页面上，如果要实现【顶部轮播，手指触摸左右滑动】我的方案是，通过监听滑动，阻止默认事件来完成div.addEventListener('touchmove',function(event){event.preventDefault();//阻止浏览器的默认事件})这样，左右滑动可以完成了，但是触摸这个div的时候，页面不能上下滑动了，怎么办？问题已经解决了，思路是var xx,yy,XX,...
js监听手机端的touch滑动事件
ASP.NET
05-26 793
实现原理：获取触摸首尾2点的坐标，Math.atan2获得2点连成的直线与x轴正方向的夹角，从而得到滑动的方向！原理图： <!doctype html> <html> <head> <meta charset="utf-8"> <title>javascript判断手指在移动端上滑动的方向</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.j
html滑动事件监听,js实现滑动触屏事件监听的方法
weixin_39977642的博客
06-05 471
本文实例讲述了js实现滑动触屏事件监听的方法。分享给大家供大家参考。具体实现方法如下：function span_move_fun(){var span = document.getElementById("move_k");var span_left = $(span).offset().left;var span_top = $(span).offset().top;var start_lef...
html如何判断用户手势,教你如何预判用户手势行为
weixin_28809647的博客
06-15 154
本文不想过多的介绍算法，只阐述核心思路近来一直在思考，移动端的手势操作如何能更加精确。用户到底是想上下滑动呢，还是想左右滑动操作某个东西呢？如下图，在页面有一个日历。日历是靠手势左右滑动切换上下月份(可实时滑动，而不是滑动完成的回调才切换)有的安卓有个bug，不阻止浏览器默认行为，就无法实时触发move。那如果阻止了浏览器默认行为，当我手指在日历这块区域内，就没法触发浏览器上下滑动。为了解决这个问...
html5 touch事件实现页面上下滑动 - Leinov
dingjingchao的博客
02-13 3025
2014-4-29    * {margin: 0; padding: 0;}  #outer{ width:90%; height: 490px; background: #000; margin: auto; overflow: hidden;}  #inner{width:80%; height: 2000px; background: #f67d42; margin: auto;
在 JavaScript 中检测手指滑动事件
最新发布
weixin_50251467的博客
07-18 245
是一个基于 HTML5 的 UI（用户界面），用于开发响应式 Web 应用程序。库让网络应用程序监听滑动手势。每当调用 DOM 元素时，该库纯粹检测。如你所见，如果用户在段落内但在边界内向左或向右滑动，我们会检测到。在这个输出中，我们得到了许多有用的属性，例如，对象，它告诉你在哪个方向上滑动。
html滑动事件监听,js 监听移动端web触屏事件 滑动响应
weixin_35849957的博客
06-05 500
直接上例子，以vue应用为例：html:@touchstart="touchstart()" @touchmove="touchmove(item)">{{item.label}}×js:touchstart: function () {var e = window.event;// e.preventDefault();startX = e.targetTouches[0].pageX;s...
JavaScript 监听手机端的touch滑动事件（滑动手势）
For_My_Own_Voice的博客
08-09 7047
如何监听移动端滑动手势（上 / 下 / 左 / 右滑动），今天记录下。 var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI; }; //根据起点终点返回方向 1向上滑动 2向下滑动 3向左滑动 4向右滑动 0点击事件 func...
js 监听移动端web触屏事件 滑动响应
weixin_30426879的博客
03-24 684
直接上例子，以vue应用为例： html: <ul> <li v-for="item in items" :class="{finished:item.isFinished}" @click="toggleFinish(item)" @touchstart="touchstart()" @touchmove="touc...
html左右滑动切换内容
04-07
要实现html左右滑动切换内容，可以使用CSS3的transform属性和JavaScript的事件监听和DOM操作。 首先，需要将内容包裹在一个容器中，并设置容器的宽度为所有内容宽度之和，使得内容可以水平排列。然后，设置容器的overflow属性为hidden，隐藏超出容器宽度的内容。 接下来，使用JavaScript监听容器的touchstart、touchmove和touchend事件，通过计算手指滑动的距离和速度，实现容器的滑动效果。同时，需要根据滑动距离和速度判断应该滑动到哪一个内容区域，并将该区域的位置设置为容器的左边缘。 以下是一个示例代码： HTML代码： ``` <div id="container"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> ``` CSS代码： ``` #container { width: 100%; overflow: hidden; white-space: nowrap; font-size: 0; } .content { display: inline-block; width: 100%; height: 100%; font-size: 16px; vertical-align: top; } ``` JavaScript代码： ``` var container = document.getElementById('container'); var contents = document.querySelectorAll('.content'); var currentIndex = 0; var startX, startY, moveX, moveY, deltaX, deltaY, startTime, endTime; var isScrolling = false; // 初始化容器宽度 var containerWidth = 0; for (var i = 0; i < contents.length; i++) { containerWidth += contents[i].offsetWidth; } container.style.width = containerWidth + 'px'; // 监听touchstart事件 container.addEventListener('touchstart', function(e) { startX = e.touches[0].pageX; startY = e.touches[0].pageY; deltaX = 0; deltaY = 0; startTime = new Date().getTime(); isScrolling = false; }); // 监听touchmove事件 container.addEventListener('touchmove', function(e) { moveX = e.touches[0].pageX; moveY = e.touches[0].pageY; deltaX = moveX - startX; deltaY = moveY - startY; // 如果滑动距离大于10px，则认为是滑动而不是点击 if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) { e.preventDefault(); isScrolling = true; // 根据滑动距离设置容器的位置 container.style.transform = 'translateX(' + (-(currentIndex * container.offsetWidth + deltaX)) + 'px)'; } }); // 监听touchend事件 container.addEventListener('touchend', function(e) { endTime = new Date().getTime(); // 如果滑动时间小于250ms，并且滑动距离大于10px，则认为是快速滑动 if (isScrolling && endTime - startTime < 250 && Math.abs(deltaX) > 10) { // 根据滑动速度和方向判断应该滑动到哪一个内容区域 if (deltaX > 0) { currentIndex = Math.max(0, currentIndex - 1); } else { currentIndex = Math.min(contents.length - 1, currentIndex + 1); } } else { // 根据滑动距离和方向判断应该滑动到哪一个内容区域 if (deltaX > 0 && Math.abs(deltaX) > container.offsetWidth / 3) { currentIndex = Math.max(0, currentIndex - 1); } else if (deltaX < 0 && Math.abs(deltaX) > container.offsetWidth / 3) { currentIndex = Math.min(contents.length - 1, currentIndex + 1); } } // 设置容器的位置 container.style.transform = 'translateX(' + (-(currentIndex * container.offsetWidth)) + 'px)'; }); ``` 通过以上代码，就可以实现html左右滑动切换内容的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值