Web APIs 学习归纳8---移动端特效

        上一节学习了PC端的特效,现在学习移动端的特效。

一、移动端触屏事件

1.1 触屏事件概述

        移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动 端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。

        touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控 笔)对屏幕或者触控板操作。

        常见的触屏事件如下:

<body><div></div><script>// 1. 获取元素// 2. 手指触摸DOM元素事件var div = document.querySelector('div');div.addEventListener('touchstart', function() {console.log('我摸了你');});// 3. 手指在DOM元素身上移动事件div.addEventListener('touchmove', function() {console.log('我继续摸');});// 4. 手指离开DOM元素事件div.addEventListener('touchend', function() {console.log('轻轻的我走了');});</script>
</body>

1.2 触摸事件对象(TouchEvent)

        TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多 个触点,使开发者可以检测触点的移动,触点的增加和减少,等等

        touchstart、touchmove、touchend 三个事件都会各自有事件对象。

        触摸事件对象重点我们看三个常见对象列表:

        因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes

<body><div></div><script>// 触摸事件对象// 1. 获取元素// 2. 手指触摸DOM元素事件var div = document.querySelector('div');div.addEventListener('touchstart', function (e) {console.log(e);// touches 正在触摸屏幕的所有手指的列表 // targetTouches 正在触摸当前DOM元素的手指列表// 如果侦听的是一个DOM元素,他们两个是一样的// changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无// 因为我们一般都是触摸元素 所以最经常使用的是 targetTouchesconsole.log(e.targetTouches[0]);// targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等});// 3. 手指在DOM元素身上移动事件div.addEventListener('touchmove', function () {});// 4. 手指离开DOM元素事件div.addEventListener('touchend', function (e) {// console.log(e);// 当我们手指离开屏幕的时候,就没有了 touches 和 targetTouches 列表// 但是会有 changedTouches});</script>
</body>

1.3 移动端拖动元素

        1. touchstart、touchmove、touchend 可以实现拖动元素

        2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY

        3. 移动端拖动的原理: 手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离

        4. 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置

        拖动元素三步曲:

        (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置

        (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子

        (3) 离开手指 touchend:

注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

<body><div></div><script>// (1) 触摸元素 touchstart:  获取手指初始坐标,同时获得盒子原来的位置// (2) 移动手指 touchmove:  计算手指的滑动距离,并且移动盒子// (3) 离开手指 touchend:var div = document.querySelector('div');var startX = 0; //获取手指初始坐标var startY = 0;var x = 0; //获得盒子原来的位置var y = 0;div.addEventListener('touchstart', function(e) {//  获取手指初始坐标startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;x = this.offsetLeft;y = this.offsetTop;});div.addEventListener('touchmove', function(e) {//  计算手指的移动距离: 手指移动之后的坐标减去手指初始的坐标var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;// 移动我们的盒子 盒子原来的位置 + 手指移动的距离this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';e.preventDefault(); // 阻止屏幕滚动的默认行为});</script>
</body>

案例分析:

        1、触摸发生touchstart,获取触摸的初始位置。2、移动发生touchmove时,计算手指移动距离=当前pageX/Y-初始的X/Y。3、更改对象的位置。

注意:

        1、初始位置都是全局变量,所以设置在事件之外。

        2、 e.preventDefault(); 阻止屏幕滚动的默认行为

二、classList 属性

        classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。

添加类:

        element.classList.add(’类名’);

        追加类,而不是覆盖!!!

移除类:

        element.classList.remove(’类名’)

切换类:

        element.classList.toggle(’类名’);

注意以上方法里面,所有类名都不带点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.bg {background-color: black;}</style>
</head><body><div class="one two"></div><button> 开关灯</button><script>// classList 返回元素的类名var div = document.querySelector('div');// console.log(div.classList[1]);// 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.div.classList.add('three');// 2. 删除类名div.classList.remove('one');// 3. 切换类var btn = document.querySelector('button');btn.addEventListener('click', function() {document.body.classList.toggle('bg');})</script>
</body></html>

三、click 延时解决方案

        移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

        解决方案:

        1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。

 <meta name="viewport" content="user-scalable=no">

         2. 利用touch事件自己封装这个事件解决 300ms 延迟。

//封装tap,解决click 300ms 延时
function tap (obj, callback) {var isMove = false;var startTime = 0; // 记录触摸时候的时间变量obj.addEventListener('touchstart', function (e) {startTime = Date.now(); // 记录触摸时间});obj.addEventListener('touchmove', function (e) {isMove = true; // 看看是否有滑动,有滑动算拖拽,不算点击});obj.addEventListener('touchend', function (e) {if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击callback && callback(); // 执行回调函数}isMove = false; // 取反 重置startTime = 0;});
}
//调用 tap(div, function(){ // 执行代码 });

        原理就是:1. 当我们手指触摸屏幕,记录当前触摸时间。2. 当我们手指离开屏幕, 用离开的时间减去触摸的时间。3. 如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击。

        3. 使用插件。 fastclick 插件解决 300ms 延迟。

四、移动端常用开发插件

4.1 什么是插件

        JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。 我们以前写的animate.js 也算一个最简单的插件.

        fastclick 插件解决 300ms 延迟。

        使用延时 GitHub官网地址: https://github.com/ftlabs/fastclick

4.2 插件的使用

        1. 引入 js 插件文件。 2. 按照规定语法使用。

if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);
}

4.3 Swiper 插件的使用

        中文官网地址: https://www.swiper.com.cn/

        1. 引入插件相关文件。 2. 按照规定语法使用

4.3.1 利用Swiper实现轮播图(重点掌握)

        1、登录 https://www.swiper.com.cn/

        2、点击获取Swiper

        3、点击下载

        4、根据基础演示中的对应编号,点击打开demos下的html文件,查看源码

        5、根据源码中的这两部分,明确我们需要外部引入的文件

<!-- Link Swiper's CSS --><link rel="stylesheet" href="../swiper-bundle.min.css" />
 <!-- Swiper JS --><script src="../swiper-bundle.min.js"></script>

        在dist文件下的css文件夹和js文件夹,里面有我们需要引入的文件 (新的版本,没有细分css和js文件夹,而是直接放在一起了,根据名称自己找到对应文件即可)

        6、将css文件和js文件中的内容,在项目想创建css,js文件夹分别存入(拖拽就可加入)

 

        7、在自己的开发界面的<head>中引入这两个文件

        8、因为自己的js文件依赖于swiper的js,所以自己的js文件在swiper的js引入后,再引入

 

        9、按照语法规定使用swiper的文件 ,将swiper源码中的轮播图框架

        添加到,自己的html文件下的对应位置

    <!-- 主体内容部分 --><div class="main-content"><!-- 滑动图 --><div class="slider"><!-- Swiper 注意不要更改里面的结构和类名 --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="upload/banner.dpg" alt=""></div><div class="swiper-slide"><img src="upload/banner1.dpg" alt=""></div><div class="swiper-slide"><img src="upload/banner2.dpg" alt=""></div><div class="swiper-slide"><img src="upload/banner3.dpg" alt=""></div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div></div>

         注意:1、不要更改类名、结构名,因为后面会用到!!!!2、但是src可以更改

        10、复制源码中的css样式设置,粘贴到自己文件的css文件下

        11、复制源码中的js样式设置,粘贴到自己的文件的js文件下

4.4 其他移动端常见插件

        1、superslide: http://www.superslide2.com/

        2、iscroll: https://github.com/cubiq/iscroll

4.5 插件的使用总结

        可以在直接在swiper官网的中文教程中,查看使用方法

        1. 确认插件实现的功能

        2. 去官网查看使用说明

        3. 下载插件

        4. 打开demo实例文件,查看需要引入的相关文件,并且引入

        5. 复制demo实例文件中的结构html,样式css以及js代码

4.6 插件使用练习-移动端视频插件 zy.media.js

        按照4.3中的步骤依次执行!!!

        1、下载就省略了

        2、找到源码使用的css和js文件

        3、将这两个文件找到放在我们的项目下

 

        4、复制源码中的css,js链接,可以直接一起放在head标签中。

        5、复制源码中 html框架,js框架,到自己的项目

        注意到,因为js的书写用到了源码提到的js文件,所以源码中的js文件的引入要在这一步之前。

        6、最后修改一下src和大小满足自己项目即可。 

五、移动端常用开发框架

5.1 什么是框架

        框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架 本身,使用者要按照框架所规定的某种规范进行开发。

        插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小。

        前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端,也能开发移动端。

        前端常用的移动端插件有 swiper、superslide、iscroll等。

        框架: 大而全,一整套解决方案。

        插件: 小而专一,某个功能的解决方案。

5.2 Bootstrap框架

        Bootstrap 是一个简洁、直观、强悍的前端开发框架,它让 web 开发更迅速、简单。

        它能开发PC端,也能开发移动端。

5.3 Bootstrap使用方法

        1、登录 : https://www.bootcss.com/ bootstrap官网,查阅3or4版本,下载

        2、下载后将bootstrap全部放到项目中

        3、在官网中查看JS插件,找到想用的,比如轮播图

        4、注意!!!!Bootstrap都是基于JQuery实现,所以引入JS文件时,都要引入

        5、同时引入CSS文件

        6、将官网下方的源码复制,放到我们自己项目所需的地方

        7、根据自己的项目对一些内容修改即可

        8、还可以借助官网中的其他方法,增加功能,比如自动切换

        只需要将代码复制到自己的项目中,放在script标签中即可

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

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

相关文章

Go语言函数

在Go语言中&#xff0c;函数是一种基本的构建块&#xff0c;用于组织代码并执行特定任务。它们是可重复使用的代码段&#xff0c;可以接收输入参数&#xff0c;执行一系列操作&#xff0c;并可返回结果。以下是Go语言中函数的详细介绍及其使用方法&#xff1a; 基本语法 Go语…

让新手变中手的ChatGPT 使用方法

让新手变中手的ChatGPT 使用方法 已经要一年了,没想到这篇还是一样有用。看到许多依然是一句话就要问出结果的教学,就知道AI 进步很快,但人的学习速度还需要更多时间。 以下为去年原版内容加上新的两招更新,希望帮助你使用ChatGPT 更好用,当未来文字可直接生成影像时,你…

容联云孔淼:大模型落地与全域营销中台建设

近日&#xff0c;由金科创新社主办的2024区域性商业银行数智化转型研讨会顺利召开&#xff0c; 容联云产业数字云事业群副总经理、诸葛智能创始人孔淼受邀出席&#xff0c;并分享数智化转型实践经验。 他分享了容联云两大核心产品&#xff0c;“大模型应用容犀Copilot”在金融营…

TypeScript 基础学习笔记:interface 与 type 的异同

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 TypeScript 学习笔记&#xff1a;interface 与 type 的异同&#x1f3a3; 引言&#x1f680; 快速入门1️⃣ Interface&#xff08;接口&#xff09;&#x1f4cb; 定义&#x1f91d; 实现&#x1f4a1; 特点 2️⃣ Type Al…

Android 高版本实现沉浸式状态栏

目前实现的android高版本沉浸式状态栏分为两类&#xff1a; 1、是纯透明状态栏&#xff1b; 2、是纯透明状态栏&#xff0c;但是状态栏字体是黑色&#xff1b; 将状态栏的代码封装到BaseActivity中更方便使用&#xff1a; BaseActivity: public abstract class BaseActivit…

如何在Linux中安装Docker Compose

下载安装 在Linux中安装Docker Compose相对简单&#xff0c;你可以按照以下步骤进行 确保Docker已经安装   Docker Compose需要在系统上安装了Docker才能正常工作。如果你的系统上还没有安装Docker&#xff0c;请先安装Docker。 下载Docker Compose   你可以从Docker官方Gi…

记录HCIP学习过程中的疑问

1、查看协议路由表、本地核心路由表、FIB表的命令&#xff1f;&#xff1f;&#xff1f; 查看FIB表&#xff1a;display fib [ slot-id ] 2、最优路由选择&#xff0c;当达到目的地址的路由有多条时&#xff0c;本地核心路由 与FIB表的情况&#xff1f;&#xff1f;&#xf…

代码随想录算法训练营第四十四天

sad的一天&#xff0c;明天开始上班&#xff0c;而且娃还行&#xff0c;媳妇儿状态不稳定&#xff0c;太难了也&#xff01;&#xff01;&#xff01; 完全背包 #include<vector> #include<iostream> using namespace::std; int main(){int N;//种类int V;//空间ci…

AI一键换装超强电商生产力工具下载

支持win版本&#xff0c;对电脑硬件有一定的要求。建议固态硬盘留足至少30 G的空间&#xff0c;显卡n卡显存至少4G。一些低端独立显卡可能还不如高配cpu集成。 程序文件比较大&#xff0c;因为涉及到大型模型。 下载链接在后面 下载链接&#xff1a; https://pan.baidu.com…

【Linux】如何定位客户端程序的问题

文章目录 1 客户端程序和服务端程序的差别2 问题类型2.1 崩溃(crash)2.2 CPU高2.3 内存高2.4 线程卡死 3 总结 1 客户端程序和服务端程序的差别 客户端程序是运行在终端上&#xff0c;通常都会与业务系统共存&#xff0c;而服务端程序通常会运行在单独的节点上&#xff0c;或者…

怎麼檢測線上代理IP是否生效?

代理IP在保護網路隱私、繞過地理限制、提高網路安全等方面發揮著重要的作用。使用代理IP時&#xff0c;經常會涉及到一個問題&#xff1a;如何確定代理IP是否生效&#xff1f;在這篇文章中&#xff0c;我們將詳細討論幾種檢測線上代理IP是否生效的方法。 一、使用線上代理檢測…

Shell编程之条件语句与case语句

目录 1.条件测试 1.1 文件测试 1.2 整数测试 1.3 字符串测试 1.4 逻辑测试 2.if语句 2.1 单分支if语句 2.2 双分支if语句 2.3 多分支if语句 3.case分支语句 1.条件测试 test命令 Shell环境根据命令执行后的返回状态值&#xff08;$?&#xff09;来判断是否执行成功…

找最大数字-第12届蓝桥杯国赛Python真题解析

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第60讲。 找最大数字&#…

你会拧螺丝吗?来看看如何拧紧螺丝?——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 螺丝拧紧看似简单&#xff0c;却是一门需要技巧和耐心的技术活。很多人可能会认为&#xff0c;只要把螺丝旋进孔里&#xff0c;用力拧紧就可以了。但实际上&#xff0c;拧紧螺丝的过程远不止如此。在这篇文章中&#xf…

FPGA+DDR+SERDES+USB3.0单向传输机方案,数据只能单向传输,避免反向攻击,确保系统安全

FPGADDRSERDESUSB3.0方案&#xff0c;设备包含发送端接收端&#xff0c;物料上采用光纤通讯&#xff0c;数据只能单向传输&#xff0c;避免反向攻击&#xff0c;确保系统安全 客户应用:高安全、高可靠性要求的场景 主要性能: 1.支持USB3.0传输&#xff0c;实测可达到350MB/s 2.…

c#设置或者获取一个泛型整数指定bit的值

1.设置 代码如下&#xff08;示例&#xff09;&#xff1a; /// <summary>/// 设置一个整形数的每一个bit的值/// </summary>/// <typeparam name"T"></typeparam>/// <param name"flag">bit位0或者1</param>/// <…

做安卓应用开发的我,转前端开发了

距离转前端开发已经快3个月了&#xff0c;现在自己也慢慢的熟悉了开发。 在2月份的时候。领导找我们移动小组的谈话&#xff0c;主要是关于转前端或者后端的问题。由于公司移动端的选型&#xff0c;对安卓原生的需求降低&#xff0c;问下我们转其他开发的需求。 我毫不犹豫的选…

【C++】滑动窗口:最大连续1的个数

1.题目 2.算法思路 其实在做这道题的时候并不需要真的把0翻转成1&#xff0c;只需要找到最长的子数组且该子数组中0的个数不大于K&#xff0c;就可以了&#xff01; 当然我们首先想到的是暴力穷举法&#xff1a; 找到所有符合题意的子数组&#xff0c;跳出最长的那个就可以了…

Python中的异常处理:深入探索try-except-finally结构

Python中的异常处理&#xff1a;深入探索try-except-finally结构 一、引言 在Python编程中&#xff0c;异常处理是一个非常重要的部分。当程序遇到错误时&#xff0c;比如尝试除以零、文件读取失败等&#xff0c;Python会抛出一个异常。如果我们不捕获这些异常&#xff0c;程…

Spring AI实战之一:快速体验(OpenAI)

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于Spring AI Spring Boot、Spring Cloud、Spring Data&#xff0c;作为一名Java程序员&#xff0c;相信您对这些概览早已耳熟能详&#xff0c;或者天天在用…