手势事件-左滑-右滑-滑动切换-手势封装

最新推荐文章于 2023-11-01 10:43:23 发布
最新推荐文章于 2023-11-01 10:43:23 发布
阅读量576 收藏
点赞数
分类专栏： JavaScript笔记本

手势事件-手势封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手势事件</title>
    <style>
        .box {
            width: 320px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="box">

    </div>
    <script>

        window.onload=function () {
            var box=document.querySelector('.box');

            /*手势封装*/
            var bindSwipEvent = function (dom,leftFn,rightFn) {
            	/* 开始的点坐标 */
            	var start = null;
            	/* 移动的距离 */
            	var move = null;
            	/* 移动结束的点 */
            	var moveEnd = null;
            	/* 是否进行移动了，有可能强制退出了 */
            	var moveBol = false;
				dom.addEventListener('touchstart',function (e) {
					/* 开始触摸 */
					start = e.touches[0].clientX;
				})
				dom.addEventListener('touchmove',function(e) {
					/* 手指移动的最后的点 */
					moveEnd = e.touches[0].clientX;
					/* 移动的距离 */
					move = moveEnd - start
					moveBol = true;
				})
				dom.addEventListener('touchend',function(e) {
					/* 触摸结束 */
					if (moveBol && Math.abs(move)>50) {
						if (move > 0) {
							rightFn && rightFn.call(this.e)
						} else {
							leftFn && leftFn.call(this,e)
						}
					}
				})
				start = 0;
				move = 0;
				moveEnd = 0;
				moveBol = false;
			}

			/* 使用 */
			bindSwipeEvent(box,function (e) {
                console.log("左移"+this+e);
            },function (e) {
                console.log("右移"+this+e);
            });
       }

    </script>
</body>
</html>
四月四日梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android实现手势滑动（左滑和右滑）
01-03
最近想实现Android左滑弹出菜单框，右滑消失菜单这个个功能。了解了一下Android 的滑动事件，必须是在view组件或者Activity上实现，同时必须实现OnTouchListener, OnGestureListener这个两个接口。 public class MyRelativeLayout extends RelativeLayout implements GestureDetector.OnGestureListener{ private float mPosX, mPosY, mCurPosX, mCurPosY; private static final int FL
移动端的手势事件——左右滑动
Hemx的博客
08-04 2040
手势事件 会听过什么左滑喜欢，右滑不喜欢，那么这样的滑动手势如何实现，在此用touch事件来实现左右滑动的判断 左右滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
ionic4 手势事件：左滑、右滑
Java is the best language~
08-18 1106
1、安装插件 npm install hammerjs --save/cnpm install hammerjs --save 2、ts界面引入命令 import "hammerjs"; 3、ts界面写测试方法 //左滑事件 async test() { const alert = await this.alertController.create({ h...
页面控制--移动端开发手势库Hammer.JS使用文档
qq_45321489的博客
11-01 703
Hammer.js是一个轻量级的触屏设备的手势插件库,它能帮我们识别出在移动端开发过程中遇到的触摸,拖动,长按,滑动,手指平移,双指捏拿缩放等常见的用户手势操作.Hammer.js不需要依赖任何JS库,并且它的体积较小,生产环境的Hammer.js体积为7.34KB.Hammer.js官网地址正式版:开发版:Github源码地址:Harmmer可以运行在除了IE8-的任何地方。浏览器若对触摸行为（touch-action）提供原生支持，那么对比那些不支持的浏览器，会有更好的体验。可通过查看页面了解更多。
使用hammer.js实现移动端手指滑动切换轮播图教程
学习
05-13 944
hammer.js手指触摸切换轮播图 今天面试时，要求做一个手指触摸方式切换轮播图 这里我用到bootsrap的轮播图组件 + hammer.js库 在 hammer.js 中 Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。 Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动 演示效果： 代码如下： &lt
滑动事件判断(手指上划、下滑/左滑、右滑)
程小博衍的博客
04-20 677
滑动页面模块变长
ios-左滑右滑View封装.zip
07-11
详细介绍以及demo https://github.com/DaiChenxi/CXSlidingView 喜欢可以点个赞
移动端滑动切换组件封装 vue-swiper-router实例详解
10-17
主要介绍了移动端滑动切换组件封装 vue-swiper-router实例详解,需要的朋友可以参考下
ESP-32F模组AD封装库
最新发布
11-17
ESP-32F模组AD封装库
AD-3D-STEP 3D封装
09-21
AD-3D-STEP 3D封装
USB-B母座3d封装
05-14
USB-B母座90度 3d封装
移动端手势事件 hammer.JS插件
webxiaoma
06-16 9062
今天我总结一下我以前用的一个移动端手势的插件 HAMMER.JS插件，很好用，而且提供的手势也很多。它没有任何依赖性，它很小，只有7.34 kB最小化+ gzip压缩！我只是简单的总结了一下他的用法，详细使用请访问官网一、引入hammer.JS1.下载地址：http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址：http://hammerj
Hammer.js——移动设备触摸手势
cc蒲公英的博客
09-18 7343
简介 Hammer.js是一个轻量级的JavaScript库（仅有2kb），能让你的网站轻松实现触控事件。它依赖于jQuery，用来控制触摸设备上的多点触控特性。并支持以下特性： TapDouble TapHoldDragTransform 兼容性 Hammer.js已经在IOS5系统的iPad1，IOS5系统的iPhone，Android 2.3.3的三星Ga
使用Hammer制作移动端轮播图
weixin_34319999的博客
03-12 346
需求 最近公司官网改版 手机端新的设计稿中有个轮播效果 如下图： 这个轮播图要求有三个效果 左右滑动可以切换 不循环轮播 上面列表中的文案要求高亮的尽量居中 类似今日头条app那种滑动切换 上面列表中的文案点击 滑动到对应位置 列表文案共6个 超出容器可见宽度 要求实现拖动列表 解决 布局： 选择了手淘大漠老师的flexible布局...
ionic5中手势相关事件的使用
u010574271的博客
04-28 558
文章目录前言准备使用tap(点击)、press(按下)安装hammerjs在项目的src/main.ts中引入hammerjs在app.module.ts中引入HammerModule测试 前言 ionic5中的gestures手势事件包括：tap(点击)、press(按下)、pan(随着手指移动)、swipe(随着手指迅速移动)、rotate(旋转)、pinch(缩放)等 准备 首先我们在项目中新建一个页面用于演示手势的运用 ionic g page gestures 在tab1中新建按钮链接到ges
H5 项目页面向左滑动展示下一页，向右滑动展示上一页，左右滑动需有左右倾斜的动画，第一页不能右滑，最后一页不能左右滑动...
weixin_35756130的博客
01-10 2158
可以使用手势库 (gesture library) 来实现这种效果。在 HTML5 中，有许多现成的库可以使用，如 Hammer.js 和 swipe.js。 在使用这些库时，首先需要在页面上绑定手势事件。比如，使用 Hammer.js 时可以这样绑定： var myElement = document.getElementById('myElement'); var mc = new Hamme...
ionic4 hammerjs手势事件左滑右滑
沉睡的博客
06-09 198
ionic4 hammerjs手势事件左滑右滑 首先需要安装hammerjs ，在项目目录下执行： npm install hammerjs --save ts: import 'hammerjs'; SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' }; // action triggered when user swi...
初次使用hammer.js做卡片滑动效果
DIWUCH的博客
07-02 1626
项目新需求做卡片滑动的效果，因为大多数的一些js插件库是分开监听X和Y方向的，但是hammer.js是监听全方位，比较满足项目需求，所以初次尝试使用了下。大致如下： 具体的文档可以参考hammer.js官方文档： http://hammerjs.github.io 我们主要使用了两个监听事件： panmove 主要为了监听手指移动距离来移动上层图片以及下层图片放大的比例 pan...
hammer的初始化及移动端各种滑动
weixin_30814329的博客
08-26 618
前言：本人对hammer了解不是很多，早做项目时遇到了手机端的一些滑动事件，特此分析下hammer的某些属性。 hammer.js是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。Hammer.js不需要依赖任何其他的js框架，并且整个框架非常小，v2.0.4版本只有3.96kb。 1、hammer.js引用 可直接引入文件，也可以引入...
vue封装a-modal组件，保留默认事件
06-01
你可以在封装a-modal组件时，在模板中使用v-on="$listeners"来将父组件传递的事件绑定到子组件上。同时，在子组件的props中添加modalOptions对象，可以保留默认事件。 示例代码如下： ```html <a-modal v-bind=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值