当前位置： 首页 > news >正文

JavaScript模拟滑动手势

news 2026/3/27 11:40:51

双击回到顶部

左滑动

 

右滑动

 

代码展示 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Gesture Example</title><style>body {margin: 0;height: 200vh;} /* 模拟长页面 */.notification {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 20px;background-color: rgba(0, 0, 0, 0.7);color: white;font-size: 24px;border-radius: 10px;opacity: 0;transition: opacity 0.5s ease, transform 0.5s ease;}.notification.show {opacity: 1;transform: translate(-50%, -50%) scale(1.1);}</style></head><body><div class="notification" id="notification"></div><div style="height: 30vh; background-color: rgb(178, 129, 129)"></div><div style="height: 30vh; background-color: rgb(141, 40, 40)"></div><div style="height: 30vh; background-color: rgb(135, 85, 85)"></div><div style="height: 30vh; background-color: rgb(209, 188, 188)"></div><div style="height: 30vh; background-color: rgb(203, 44, 44)"></div><script>//在dom完全加载后执行document.addEventListener("DOMContentLoaded", () => {let touchStartX = 0;let touchStartY = 0;let touchEndX = 0;let touchEndY = 0;let lastTap = 0;const notification = document.getElementById("notification");//监听开始事件document.addEventListener("touchstart", (e) => {touchStartX = e.changedTouches[0].screenX;touchStartY = e.changedTouches[0].screenY;});//监听移动事件document.addEventListener("touchmove", (e) => {touchEndX = e.changedTouches[0].screenX;touchEndY = e.changedTouches[0].screenY;});//监听结束事件document.addEventListener("touchend", () => {handleGesture();});//监听双击事件document.addEventListener("touchend", (e) => {const currentTime = new Date().getTime();const tapLength = currentTime - lastTap;if (tapLength < 300 && tapLength > 0) {// 双击事件window.scrollTo({ top: 0, behavior: "smooth" });}lastTap = currentTime;});//判断手势function handleGesture() {const deltaX = touchEndX - touchStartX;const deltaY = touchEndY - touchStartY;if (Math.abs(deltaX) > Math.abs(deltaY)) {if (deltaX > 50) {showNotification("右滑动");} else if (deltaX < -50) {showNotification("左滑动");}}}//显示通知function showNotification(message) {notification.textContent = message;notification.classList.add("show");setTimeout(() => {notification.classList.remove("show");}, 1000);}});</script></body>
</html>

 

相关文章：

JavaScript模拟滑动手势

双击回到顶部 左滑动 右滑动 代码展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Gesture…...

编程日记 2024/7/26 20:42:29

Text Control 控件教程：使用 .NET C# 中的二维码和条形码增强文档

QR 码和条形码非常适合为文档和 PDF 文件增加价值&#xff0c;因为它们提供轻松的信息访问、验证信息、跟踪项目和提高交互性。条形码可以弥补纸质或数字人类可读文档与网络门户或网络应用程序中的数字信息之间的差距。大多数用户都熟悉 QR 码和条形码&#xff0c;它们在许多过…...

编程日记 2024/7/26 20:40:28

最新爆火的开源AI项目 | LivePortrait 本地安装教程

LivePortrait 本地部署教程&#xff0c;强大且开源的可控人像AI视频生成 1&#xff0c;准备工作&#xff0c;本地下载代码并准备环境&#xff0c;运行命令前需安装git 以下操作不要安装在C盘和容量较小的硬盘&#xff0c;可以找个大点的硬盘装哟 2&#xff0c;需要安装FFmp…...

编程日记 2024/7/26 20:39:27

揭秘Django与Neo4j：构建智能知识图谱的终极指南

揭秘Django与Neo4j：构建智能知识图谱的终极指南 前言 图是一种用于对象之间的成对关系进行建模的数学结构。 它由两个主要元素组成：节点和关系。 节点：节点可以看作是传统数据库中的记录。每个节点代表一个对象或实体，例如一个人或一个地方。节点按标签分类，这有助于根…...

编程日记 2024/7/26 20:38:26

项目一缓存商品

文章目录 概要整体架构流程技术细节小结 概要 因为商品是经常被浏览的,所以数据库的访问量就问大大增加,造成负载过大影响性能,所以我们需要把商品缓存到redis当中,因为redis是存在内存中的,所以效率会比MySQL的快. 整体架构流程 技术细节 我们在缓存时需要保持数据的一致性所…...

编程日记 2024/7/26 20:36:24

SEO与数据中心代理IP的结合能带来哪些便利？

本文将探讨将SEO与数据中心代理IP结合所带来的好处&#xff0c;以及如何利用这种组合来提升网站在搜索引擎中的排名和可见性。 1. 数据中心代理IP的作用和优势 数据中心代理IP指的是由数据中心提供的IP地址&#xff0c;用于隐藏真实服务器的位置和身份。与其他类型的代理IP相…...

编程日记 2024/7/26 20:35:23

《昇思25天学习打卡营第6天|ResNet50图像分类》

写在前面 从本次开始&#xff0c;接触一些上层应用。 本次通过经典的模型&#xff0c;开始本次任务。这里开始学习resnet50网络模型&#xff0c;应该也会有resnet18&#xff0c;估计18的模型速度会更快一些。 resnet 通过对论文的结论进行展示&#xff0c;说明了模型的功能&…...

编程日记 2024/7/26 20:32:19

Activiti 6 兼容openGauss数据库bytes类型不匹配

当前有个项目需要做国产调研&#xff0c;需要适配高斯数据库&#xff0c;项目启动的时候&#xff0c;提示column "bytes_" is type bytea but expression is of type blob byte_字段是act_ge_bytearray表的&#xff0c;openGauss里的类型是bytea&#xff0c;类型是匹…...

编程日记 2024/7/26 20:28:15

缓存技术：提升性能与效率的利器

在当今数字化时代&#xff0c;软件应用的性能与响应速度成为了衡量其成功与否的重要标准之一。随着数据量的爆炸性增长和用户需求的日益多样化&#xff0c;如何高效地处理这些数据并快速响应用户请求成为了软件开发中亟待解决的问题。缓存技术&#xff0c;作为提升系统性能、优…...

编程日记 2024/7/26 20:26:14

LeetCode 637, 67, 399

文章目录 637. 二叉树的层平均值题目链接标签思路代码 67. 二进制求和题目链接标签思路代码 399. 除法求值题目链接标签思路导入value 属性find() 方法union() 方法query() 方法 代码 637. 二叉树的层平均值 题目链接 637. 二叉树的层平均值 标签 树 深度优先搜索 广度优先…...

编程日记 2024/7/26 20:25:13

如何压缩视频大小不改变画质？这5个视频压缩免费软件超好用！

如何压缩视频大小不改变画质&#xff1f;随着生活的水平逐步提高&#xff0c;视频流媒体服务越来越受欢迎。提供简短而引人注目的视频来展示您的产品或服务已成为一种出色的营销手段。然而&#xff0c;当您要准备导出最终视频时&#xff0c;可能会面临一个常见问题&#xff1a;…...

编程日记 2024/7/26 20:23:11

深入理解 Java 虚拟机第三版（周志明）

这次社招选的这本作为 JVM 资料查阅&#xff0c;记录一些重点 1. 虚拟机历史 Sun Classic VM &#xff1a;已退休 HotSpot VM&#xff1a;主流虚拟机&#xff0c;热点代码探测技术 Mobile / Embedded VM &#xff1a;移动端、嵌入式使用的虚拟机 2.2 运行时数据区域 程序计…...

编程日记 2024/7/26 20:21:09

算法 定长按组翻转链表

一、题目 已知一个链表的头部head&#xff0c;每k个结点为一组&#xff0c;按组翻转。要求返回翻转后的头部 k是一个正整数&#xff0c;它的值小于等于链表长度。如果节点总数不是k的整数倍&#xff0c;则剩余的结点保留原来的顺序。示例如下&#xff1a; &#xff08;要求不…...

编程日记 2024/7/26 20:19:07

安装nfs和rpcbind设置linux服务器共享磁盘

1、安装nfs和rpcbind 1.1 检查服务器是否安装nfs和rpcbind&#xff0c;执行下命令&#xff0c;检查服务器是否安装过。 rpm -qa|grep nfs rpm -qa|grep rpcbind 说明服务器以安装了&#xff0c;如果没有就需要自己安装 2、安装nfs和rpcbind 将rpm安装包&#xff1a; libtirpc-…...

编程日记 2024/7/26 20:17:05

物联网在电力行业的应用

作者主页: 知孤云出岫 这里写目录标题 作者主页:物联网在电力行业的应用简介主要应用领域代码案例分析1. 智能电表数据采集和分析2. 设备监控和预测性维护3. 能耗管理和优化4. 电力负载预测5. 分布式能源管理6. 电动汽车充电管理7. 电网安全与故障检测 物联网在电力行业的应用…...

编程日记 2024/7/26 20:15:02

Java 代码规范if嵌套

在Java编程中&#xff0c;过度的if嵌套会使代码难以阅读和维护。为了遵循良好的代码规范&#xff0c;我们应尽量减少嵌套的深度。这通常可以通过重新组织代码或使用其他结构&#xff08;如switch语句&#xff0c;或者将逻辑封装到单独的方法中&#xff09;来实现。 以下是一个…...

编程日记 2024/7/26 20:14:02

ASPICE如何确保汽车软件产品质量的稳固基石

ASPICE通过一系列的方法和原则来保障汽车软件产品的质量&#xff0c;以下是其保障产品质量的几个关键方面&#xff1a; 制定明确的质量方针和目标&#xff1a; ASPICE要求组织制定明确的质量方针和目标&#xff0c;这些方针和目标与客户需求和预期相一致。 开发团队需要定义软…...

编程日记 2024/7/26 20:12:00

【深度学习】yolov8-seg分割训练，拼接图的分割复原

文章目录 项目背景造数据训练 项目背景 在日常开发中&#xff0c;经常会遇到一些图片是由多个图片拼接来的&#xff0c;如下图就是三个图片横向拼接来的。是否可以利用yolov8-seg模型来识别出这张图片的三张子图区域呢&#xff0c;这是文本要做的事情。 造数据 假设拼接方式有…...

编程日记 2024/7/26 20:10:59

Python升级打怪—Django入门

目录 一、Django简介 二、安装Django 三、创建Dajngo项目 (一) 创建项目 (二) 项目结构介绍 (三) 运行项目 (四) 结果 一、Django简介 Django是一个高级Python web框架&#xff0c;鼓励快速开发和干净、实用的设计。由经验丰富的开发人员构建&#xff0c;它解决了web开…...

编程日记 2024/7/26 20:09:58

leetcode面试题17.最大子矩阵

sooooooo long没刷题了&#xff0c;汗颜 题目链接&#xff1a;leetcode面试题17 1.题目 给定一个正整数、负整数和 0 组成的 N M 矩阵&#xff0c;编写代码找出元素总和最大的子矩阵。 返回一个数组 [r1, c1, r2, c2]&#xff0c;其中 r1, c1 分别代表子矩阵左上角的行号和…...

编程日记 2024/7/26 20:08:57

跨平台终端工具cmatrix：打造震撼的数字雨可视化效果

跨平台终端工具cmatrix&#xff1a;打造震撼的数字雨可视化效果 【免费下载链接】cmatrix Terminal based "The Matrix" like implementation 项目地址: https://gitcode.com/gh_mirrors/cm/cmatrix 你是否曾幻想过在自己的终端中重现《黑客帝国》里令人着迷的…...

编程新知 2026/3/27 11:27:59

汉语到底比其他语言强在哪？

汉语到底比其他语言强在哪&#xff1f;只要一提起这个话题&#xff0c;弹幕里肯定有朋友要说了&#xff1a;哎呀&#xff0c;英语才是世界语言&#xff0c;汉语不严谨&#xff0c;语言没有高下之分&#xff0c;禁止拉踩。这种论调咱们听了一百年了&#xff0c;甚至不少自己人都…...

编程新知 2026/3/27 11:17:58

SpringCloud Alibaba与Nacos版本不匹配？手把手教你解决‘Client not connected‘错误

SpringCloud Alibaba与Nacos版本兼容性实战&#xff1a;彻底解决Client not connected问题 微服务架构的复杂性往往隐藏在细节之中。当SpringCloud Alibaba项目启动时控制台突然抛出Client not connected, current status:STARTING的红色警告&#xff0c;不少开发者都会心头一紧…...

编程新知 2026/3/27 10:25:43

PVB于EVA胶片的区别

PVB于EVA胶片的区别实例&#xff1a;PVB用于封装“双玻璃光伏组件”&#xff1a;玻璃&#xff0b;PVB&#xff0b;电池片&#xff0b;PVB&#xff0b;玻璃&#xff0c;PVB胶片已取代EVA胶片。为什么用PVB&#xff0c;不像我们现在一样用EVA&#xff1f;因为&#xff1a; 在玻璃…...

编程新知 2026/3/27 9:39:05

MATLAB图像处理实战：用imfindcircles快速定位硬币边缘（附完整代码）

MATLAB图像处理实战&#xff1a;用imfindcircles快速定位硬币边缘&#xff08;附完整代码&#xff09; 在工业检测和医学影像分析中&#xff0c;圆形物体的精准定位往往是关键的第一步。无论是生产线上的硬币质量检查&#xff0c;还是显微镜下的细胞计数&#xff0c;快速准确地…...

编程新知 2026/3/27 9:12:50

AudioSeal效果展示：实测音频隐形水印，听不出区别但能精准检测

AudioSeal效果展示&#xff1a;实测音频隐形水印&#xff0c;听不出区别但能精准检测 1. 音频水印技术概述 1.1 什么是音频隐形水印 音频隐形水印是一种将数字标识信息嵌入到音频信号中的技术&#xff0c;这些信息对人类听觉系统几乎不可感知&#xff0c;但可以通过专用算法…...

编程新知 2026/3/27 8:58:47

80地理学院校2026考研复试线汇总【持续更新】

80地理学院校2026考研复试线汇总&#xff0c;已更新60多所高校复试线&#xff0c;其余学校持续更新中~武汉大学2026年地理学方向复试线&#xff1a;2026年中科院新疆生态与地理研究所复试线2026年中国矿业大学资源与地球科学学院复试线陕西师范大学2026年地理科学与旅游学院复试…...

编程新知 2026/3/27 8:36:33

OpenCore Legacy Patcher终极指南：让你的老Mac焕发新生，体验最新macOS

OpenCore Legacy Patcher终极指南&#xff1a;让你的老Mac焕发新生&#xff0c;体验最新macOS 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否还在为老旧的Mac无法升…...

编程新知 2026/3/27 8:26:31

云容笔谈·东方红颜影像生成系统与ComfyUI工作流集成：可视化节点式创作

云容笔谈东方红颜影像生成系统与ComfyUI工作流集成&#xff1a;可视化节点式创作 如果你是一位数字艺术家或者技术美术&#xff0c;可能常常面临这样的困境&#xff1a;你有一个绝佳的创意&#xff0c;比如想生成一幅融合了东方古典美学与现代光影的“红颜”肖像&#xff0c;但…...

编程新知 2026/3/27 7:44:15

RWKV7-1.5B-g1a保姆级部署教程：离线加载+免外网依赖，中小企业AI落地首选

RWKV7-1.5B-g1a保姆级部署教程&#xff1a;离线加载免外网依赖&#xff0c;中小企业AI落地首选 1. 模型简介 rwkv7-1.5B-g1a 是基于新一代 RWKV-7 架构的多语言文本生成模型&#xff0c;专为中小企业AI落地场景优化设计。这个1.5B参数的轻量级模型在保持高质量生成能力的同时…...

编程新知 2026/3/27 6:03:01