Js 功能-理解滑动手势事件 |学习笔记

简介: 快速学习 Js 功能-理解滑动手势事件

开发者学堂课程【移动 Web 前端开发:Js 功能-理解滑动手势事件】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8425


Js 功能-理解滑动手势事件

内容介绍

一、滑动效果分析

二、滑动逻辑

三、代码设置


一、滑动效果分析

1、滑动效果是如何实现的

2、理解手势事件

从当前轮播图看,可以理解到移动端常见的滑动是如何实现的,也就是 tap 事件加上位移。

依靠  touch 相关事件,根据触摸位置的改变,改变对应元素的位移 translate

 

二、滑动逻辑

1.无缝滚动&无缝滑动(定时器过渡位移)

2.点盒子对应改变(改变当前样式)

3.可以滑动( touch 事件监听触摸点坐标改变距离位移)

4.当滑动距离不够的时候吸附回去(过渡位移)

5.当滑动距离够了的时候,跳转上一张下一张(判断方向过渡位移)

 

三、代码设置

1、滑动效果是如何实现的:

/*滑动*/

/*基于当前的位置*/

/*计算将要去做定位*/

var translate X = -index*width +distance X;

/*清除过渡*/

remove Transition();

/*做定位*/

set Translate x(translate x);

2、理解手势事件:

中心点往右滑动超过50,可以理解成向右滑,中心点往左滑超过50,可以理解成向左滑;中心点往上滑超过50,可以理解成向上滑,同上,中心点往下滑超过50,可以理解成向下滑。

<! DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,

(1)title 理解手势事件

</title>

<style>

body{

margin: o;

padding: o;

}

div{

width: 100%;

height: 200px;

background: red;

}

</style></ head><body>

<div></div><script>

Window .onload = function() {

var dom = document .query selector( 'div');

/绑定事件组/

(2)手势事件的条件:

/必须滑动过/

/滑动的距离超过50px/

(3)衍生出左滑和右滑手势事件

var start x = o;

var distance x = 0

var is Move = false;

dom .add Event Listener( 'touch s tant ' ,function(e){

star tx = e. touches[o].clientx;

});

dom. Add Event Listener( 'touch moxe ' ,function(e){

var move x = e .touches[o].client x;

dis tance x = move x – start x;

is Move = true;

});

dom. Add Event Listener( "touch end" ,function(e){

if( is Move && Math .abs (dis tancex) >= 50){

if(dis tancex >O){

console.log('右滑事件')

}

else{

console. log('左滑事件')

}

(重置参数,因为移动一点是不算滑动的)

Start x = o;

Distance x = 0

Is Move = false

相关文章
|
17天前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
39 10
|
18天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
30 3
|
1月前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
45 8
|
2月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
3月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
61 5
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
83 5
|
3月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
49 2
|
4月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
77 6
|
4月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
104 1
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
47 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章