移动端特效

一,触屏事件

1.触屏touch事件

2.触摸事件对象

如果侦听的是一个DOM元素,他俩是一样的

如果手指离开了,不能侦听到前两者,能侦听到第三个

我们一般都是触摸元素,所以一般都是第二个比较常用

第一个:屏幕 第二个:DOM即div

3.移动拖拽元素

移动端拖动原理:盒子原来位置+手指移动位置

手指移动距离:手指滑动中的位置-原来触摸的位置

二,移动端常见特效

1.classlist属性

返回元素类名

可以在元素中添加删除和切换类名

类名前面是不需要‘.’的,

没有就给你加上,有就给你删了

2.click延时解决方案

三,移动端常见插件

js插件就是js文件

先把文件引入,在按照语法要求进行使用,记得把代码复制一遍。

1.swiper插件使用

网址:Swiper演示 - Swiper中文网

把结构,样式都复制一份粘贴一下,再把js和css的部分代码引入

使用方法:
首先加载插件,需要的文件有swiper-bundle.min.js和swiper-bundle.min.css文件

添加HTML内容。Swiper7的默认容器是'.swiper',Swiper6之前是'.swiper-container'。

还可以给.swiper添加一个大小

如果作为CommonJs 或ES 模块引入

//CommonJs var Swiper = require('swiper');

var mySwiper = new Swiper('.swiper', { /* ... */ });

//ES import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper', { /* ... */ });

2.插件使用总结

四,移动端常用开发框架

五,本地存储

是把信息存储在浏览器里面的

方便对信息的读取和设置,甚至页面刷新数据也不丢失

1.window.sessionStorage存储

生命周期:关闭页面窗口

在同一个窗口下的数据可以使用

以键对式来进行数据的储存

2.window.localStorage

生命周期永久生效,关闭页面它也存在

可以多窗口共享

也是以键值对的形式储存

3.案例

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

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

相关文章

Leetcode 力扣92. 反转链表 II (抖音号:708231408)

给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#xff1a;[1,4,3,2…

简单的基于信号处理的心电信号ECG特征波分割方法(MATLAB)

正常的心电图中&#xff0c;每个心跳周期内包含三个主要的特征波&#xff1a;&#xff30;波、QRS波和&#xff34;波&#xff0c;如下图所示。心电特征波能够反映心脏的生理状态信息&#xff0c;通过对其形状、幅值和持续时间的分析&#xff0c;可以用来辅助诊断心血管疾病。对…

vs2019 c++20 规范的 STL 库的智能指针 shared、unique 、weak 及 make_** 函数的源码注释汇总,和几个结论

智能指针的源码都在 《memory》 头文件中。因为头文件太长&#xff0c;再者本次整理是基于以前的零散的模板分析。故相当于抽取了该头文件中关于智能指针的源码进行分析&#xff0c;注释。 &#xff08;1 探讨一&#xff09;当独占指针指向数组时&#xff0c;其默认的删除器是…

mysql表约束基础 【default | 主键 | 外键 | 唯一键】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;MySQL之旅_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一&#xff0c;表的约…

vue3快速入门(局部使用)

目录 前置知识JavaScript-导入导出 入门操作 变量渲染页面 局部使用vue的实现步骤 vue指令 v-for v-bind v-if v-show v-on v-model 生命周期 前置知识JavaScript-导入导出 正常情况在html导入js文件是全部导入&#xff0c;这样会导致性能上的损失 。 JS提供的…

STM32F1之OV7725摄像头·SCCB总线代码编写附带源码详解

STM32F1之OV7725摄像头-CSDN博客 STM32F1之OV7725摄像头像素数据输出时序、FIFO 读写时序以及摄像头的驱动原理详解-CSDN博客 目录 1. 硬件设计 1.1 SCCB 控制相关 1.2 VGA 时序相关 1.3 FIFO 相关 1.4 XCLK 信号 2. 代码设计 2.1 SCCB总线软件实现 2.1.1 宏定…

AI图书推荐:ChatGPT解码—人工智能增强生活指南

《ChatGPT解码—人工智能增强生活指南》&#xff08;ChatGPT Decoded. A Beginners Guide to AI-Enhanced Living &#xff09;是一本由 大卫维恩斯&#xff08;David Wiens &#xff09;所著的书籍&#xff0c;旨在帮助读者了解并有效利用GPT-4语言模型这一强大工具来提升日常…

springmvc Web上下文初始化

Web上下文初始化 web上下文与SerlvetContext的生命周期应该是相同的&#xff0c;springmvc中的web上下文初始化是由ContextLoaderListener来启动的 web上下文初始化流程 在web.xml中配置ContextLoaderListener <listener> <listener-class>org.springframework.…

ncnn 优化量化

问题&#xff1a;发现推理时间过长&#xff0c;需要优化 当前正在做人脸检测部署&#xff0c;发现检测速度有点吓人&#xff0c;以下监测的时间 gpu&#xff1a; cpu&#xff1a; gpu推理大概整体时间200多毫秒&#xff0c;cpu推理时间300多毫秒&#xff0c;这里暂时没去考虑…

Oracle实践|内置函数之字符串函数

&#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端工程师 &#x1f3c6; 近期荣誉&#xff1a;华为云云享专家、阿里云专家博主、腾讯云优秀创作者、ACDU成员 &#x1f525; 三连支持&#xff1a;欢迎 ❤️关注…

C++模板——函数模板和类模板

目录 泛型编程 函数模板 函数模板概念 函数模板的定义和语法 函数模板的工作原理 函数模板的实例化 隐式实例化 显示实例化 函数模板的匹配原则 类模板 类模板的定义格式 类模板的实例化 泛型编程 什么是泛型编程&#xff1f; 泛型编程&#xff08;Generic Pr…

【Linux-并发与竞争】

Linux-并发与竞争 ■ 原子操作■ 原子操作简介■ 原子整形操作 API 函数■ 原子位操作 API 函数■ 示例一&#xff1a;原子操作实验&#xff0c;使用原子变量来实现对实现设备的互斥访问 ■ 自旋锁■ 自旋锁 API 函数■ 死锁■ 最好的解决死锁方法就是获取锁之前关闭本地中断&a…

LeetCode 124 —— 二叉树中的最大路径和

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 二叉树的问题首先我们要想想是否能用递归来解决&#xff0c;本题也不例外&#xff0c;而递归的关键是找到子问题。 我们首先来看看一棵最简单的树&#xff0c;也就是示例 1。这样的一棵树总共有六条路径&#xf…

docker如何拉取nginx最新镜像并运行

要拉取Docker Hub上的最新Nginx镜像&#xff0c;您可以使用以下命令&#xff1a; docker pull nginx 这个命令会从Docker Hub下载最新版本的Nginx镜像。如果您想要拉取特定版本的Nginx镜像&#xff0c;可以指定版本号&#xff0c;例如&#xff1a; docker pull nginx:1.18.0 拉…

详细分析tcping的基本知识以及用法

目录 前言1. 安装配置2. 基本知识3. Demo 前言 针对ping的基本知识推荐阅读&#xff1a;详细分析ping的基本知识以及常见网络故障的诊断&#xff08;图文解析&#xff09; 1. 安装配置 针对Window的下载如下&#xff1a; 安装路径&#xff1a;tcping官网 下载tcping.exe&a…

《微服务王国的守护者:Spring Cloud Dubbo的奇幻冒险》

5. 经典问题与解决方案 5.3 服务追踪与链路监控 在微服务架构的广袤宇宙中&#xff0c;服务间的调用关系错综复杂&#xff0c;如同一张庞大的星系网络。当一个请求穿越这个星系&#xff0c;经过多个服务节点时&#xff0c;如何追踪它的路径&#xff0c;如何监控整个链路的健康…

VUE3 学习笔记(3):VUE模板理念、属性绑定、条件渲染、列表渲染

准备 1.清空不必要的项目文件 项目/src/assets/ 目录文件清空 项目/src/components/ 目录文件清空 删除main.js 的css引用 App.vue 代码如下 <template> </template> <script>//注意这里默认有一个setup 去掉 </script> 运行一下无错误提示就可以了…

Cohere继Command-R+之后发布大模型Aya-23,性能超越 Gemma、Mistral 等,支持中文

前言 近年来&#xff0c;多语言大模型&#xff08;MLLM&#xff09;发展迅速&#xff0c;但大多数模型的性能依然存在显著差距&#xff0c;尤其是在非英语语言方面表现不佳。为了推动多语言自然语言处理技术的发展&#xff0c;Cohere团队发布了新的多语言指令微调模型家族——…

机器学习预测-CNN手写字识别

介绍 这段代码是使用PyTorch实现的卷积神经网络&#xff08;CNN&#xff09;&#xff0c;用于在MNIST数据集上进行图像分类。让我一步步解释&#xff1a; 导入库&#xff1a;代码导入了必要的库&#xff0c;包括PyTorch&#xff08;torch&#xff09;、神经网络模块&#xff0…

shell脚本实战--批量修改文件名

字符串截取 先来了解一下shell字符串相关操作的变量 # 从开头删除匹配最短 ## 从开头删除匹配最长 % 从结尾削除匹配最短 %% 从结尾删除匹配最长#指定字符内容截取 a*c 匹配开头为a&#xff0c;中间任意个字符&#xff0c;结尾为c的字符串 a*C 匹配…