JavaScript模拟滑动手势

news2024/11/25 4:50:13

双击回到顶部

左滑动

 

右滑动

 

代码展示 

<!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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1951029.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux命令更新-文本处理awk

awk命令简介 awk是一种强大的文本处理工具&#xff0c;可以对文本文件进行格式化、统计、计算等操作。它逐行读取文本文件&#xff0c;并对每一行进行处理。awk的语法相对简单&#xff0c;但功能非常强大&#xff0c;是Linux系统中常用的文本处理工具之一。 awk命令基本语法 …

某数据泄露防护(DLP)系统NoticeAjax接口SQL注入漏洞复现 [附POC]

文章目录 某数据泄露防护(DLP)系统NoticeAjax接口SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现某数据泄露防护(DLP)系统NoticeAjax接口SQL注入漏洞复现 [附POC] 0x01 前言 免责声明:请勿利用文章内…

60个常见的 Linux 指令

1.ssh 登录到计算机主机 ssh -p port usernamehostnameusername&#xff1a; 远程计算机上的用户账户名。 hostname&#xff1a; 远程计算机的 IP 地址或主机名。 -p 选项指定端口号。 2.ls 列出目录内容 ls ls -l # 显示详细列表 ls -a # 显示包括隐藏文件在内的所有内…

关于深度学习中的cuda编程,cuda相关介绍

深度学习中会涉及大量的、重复的矩阵运算、图形运算&#xff0c;而CPU对这种简单的加减法加速不够显著&#xff0c;可以使用GPU进行加速运算 CUDA是英伟达旗下的专门为深度学习加速运算的显卡&#xff0c;其对于简单的浮点运算、矩形运算相较于CPU加速了数倍不止 本文介绍CUD…

结合GB/T28181规范探讨Android平台设备接入模块心跳实现

技术背景 好多开发者在用我们Android平台GB28181设备接入模块的时候&#xff0c;更希望跟我们探讨一些协议规范方面&#xff0c;以便在现场对接时&#xff0c;可以知其然知其所以然。比如&#xff0c;有开发者提到&#xff0c;GB28181的状态消息报送这块到底要怎么实现&#x…

搭建Vue开发环境

一、下载Vue.js 进入官网教程安装 — Vue.js (vuejs.org) 下载开发版本到本地 二、安装 Vue Devtools 安装完成后

Spring Boot 与 MongoDB 整合指南

MongoDB MongoDB 是一种基于文档的NoSQL数据库&#xff0c;以其高性能、高可用性和易扩展性而著称。它使用 BSON&#xff08;类似 JSON 的二进制格式&#xff09;来存储数据&#xff0c;提供了灵活的数据模型&#xff0c;使得开发者可以更轻松地存储和查询复杂的数据结构。将M…

Navicat premium最新【16/17 版本】安装下载教程,图文步骤详解(超简单,一步到位,免费下载领取)

文章目录 软件介绍软件下载安装步骤激活步骤 软件介绍 Navicat是一款快速、可靠且功能全面的数据库管理工具&#xff0c;专为简化数据库的管理及降低系统管理成本而设计。以下是对Navicat的详细介绍&#xff1a; 一、产品概述 开发目的&#xff1a;Navicat旨在通过其直观和设计…

Linux:core文件无法生成排查步骤

1、进程的RLIMIT_CORE或RLIMIT_SIZE被设置为0。使用getrlimit和ulimit检查修改。 使用ulimit -a 命令检查是否开启core文件生成限制 如果发现-c后面的结果是0&#xff0c;就临时添加环境变量ulimit -c unlimited&#xff0c;之后在启动程序观察是否有core生成&#xff0c;如果…

Qt 学习第二天:创建第一个Qt程序

【最新QT从入门到实战完整版|传智教育】04 创建第一个Qt程序 一、命名规范&#xff08;驼峰命名法&#xff09; 类名&#xff1a; 首字母大写&#xff0c;单词和单词之间首字母大写 函数名和变量名&#xff1a; 首字母小写&#xff0c;单词和单词之间首字母大写 二、快捷…

零食商城管理系统

目录 一、项目背景与目标 1.1 项目背景 1.2 项目意义 1.3 国内外研究现状 1.4 开发工具介绍 二、项目内容与分工 三、 时间表与进度 1. 需求分析阶段&#xff1a; 2. 系统设计阶段&#xff1a; 3. 系统开发阶段&#xff1a; 4. 系统测试阶段&#xff1a; 5. 部署与上…

Selenium 的使用

selenium 是一个自动化测试工具&#xff0c;利用它可以驱动浏览器完成特定的操作&#xff0c;例如点击&#xff0c;下拉等&#xff0c;还可以获取浏览器当前呈现的页面的源代码&#xff0c;做到所见即所爬&#xff0c;对于一些 JavaScript 动态渲染的界面来说&#xff0c;这种爬…

WEB攻防-通用漏洞-SQL 读写注入-MYSQLMSSQLPostgreSQL

什么是高权限注入 高权限注入指的是攻击者通过SQL注入漏洞&#xff0c;利用具有高级权限的数据库账户&#xff08;如MYSQL的root用户、MSSQL的sa用户、PostgreSQL的dba用户&#xff09;执行恶意SQL语句。这些高级权限账户能够访问和修改数据库中的所有数据&#xff0c;甚至执行…

WEB集群-Tomact集群

linux云计算中小企业规模集群架构设计图----总结 在写今天内容前&#xff0c;小编绘制一个图&#xff1a;我设计了linux云计算中小企业规模集群架构设计图&#xff08;也可根据业务需求&#xff0c;增加业务变成大型企业架构设计图&#xff09; 知识补充–故障案例-https no s…

【Golang 面试基础题】每日 5 题(十)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

Python爬虫(6) --深层爬取

深层爬取 在前面几篇的内容中&#xff0c;我们都是爬取网页表面的信息&#xff0c;这次我们通过表层内容&#xff0c;深度爬取内部数据。 接着按照之前的步骤&#xff0c;我们先访问表层页面&#xff1a; 指定url发送请求获取你想要的数据数据解析 我们试着将以下豆瓣读书页…

WPF代办事项应用

目录 一 设计原型 二 后台源码 一 设计原型 添加代办事项页面&#xff1a; 二 后台源码 Model&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 待办事项应用.DataModel {pub…

数据结构(Java):Map集合Set集合哈希表

目录 1、介绍 1.1 Map和Set 1.2 模型 2、Map集合 2.1 Map集合说明 2.2 Map.Entry<K&#xff0c;V> 2.3 Map常用方法 2.4 Map注意事项及实现类 3、Set集合 3.1 Set集合说明 3.2 Set常用方法 3.3 Set注意事项及其实现类 4、TreeMap&TreeSet 4.1 集合类TreeM…

头歌最小生成树 ------习题

一、背包问题 1.理解&#xff1a;背包问题相当于最小生成树&#xff0c;也就是线性规划最优解 2.公式&#xff1a; M: 背包的总重量 w&#xff1a;物品 i 的重量 p: 物品 i 的价值 3.基本背包练习 4.完全背包问题&#xff1a;每种物品有无限件 >>> 开头加一个for…

面试常考Linux指令

文件权限 操作系统中每个文件都拥有特定的权限、所属用户和所属组。权限是操作系统用来限制资源访问的机制&#xff0c;在 Linux 中权限一般分为读(readable)、写(writable)和执行(executable)&#xff0c;分为三组。分别对应文件的属主(owner)&#xff0c;属组(group)和其他用…