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

相关文章
|
7天前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
8 0
|
2月前
|
JavaScript 前端开发
|
2月前
|
JavaScript 算法
|
2月前
|
JavaScript
|
2月前
|
JavaScript 前端开发
|
4天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
11天前
|
前端开发 JavaScript
JavaScript 中的事件委托机制详解
【2月更文挑战第2天】本文将深入探讨 JavaScript 中的事件委托机制,介绍其原理、优势以及实际应用场景,帮助读者更好地理解并运用这一重要的前端开发技术。
|
14天前
|
JavaScript 前端开发 UED
JavaScript中的事件委托机制及实践应用
事件委托是JavaScript中常用的性能优化技巧,通过将事件监听器绑定在父元素上,实现对子元素事件的统一管理,减少页面中事件处理函数的数量,提升页面性能。本文将介绍事件委托的原理和实践应用,帮助开发者更好地理解和运用这一技术。
|
15天前
|
前端开发 JavaScript 开发者
Canvas库 fabric.js可以实现哪些功能? 动图介绍
fabric.js是一个canvas库,今天整理了一下fabric.js可以实现的功能,用动图的形式分享给大家,方便快速了解fabric.js。
Canvas库 fabric.js可以实现哪些功能? 动图介绍
|
2月前
|
JavaScript 前端开发
js的常用事件
js的常用事件
11 1