Hammer.js 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Hammer.js 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Hammer.js 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !

软件简介

Hammer.js是一个轻量级的JavaScript库(仅有2kb),能让你的网站轻松实现触控事件。它依赖于jQuery,用来控制触摸设备上的多点触控特性。并支持以下特性:

  • Tap
  • Double Tap
  • Hold
  • Drag
  • Transform

Hammer.js已经在IOS5系统的iPad1,IOS5系统的iPhone,Android 2.3.3的三星Galaxy S以及Goolge Chrome 17测试可用。在桌面浏览器上鼠标能够模拟单个手指的触控事件。在Android 2与3 默认的浏览器以及FireFox 10不支持多点触控事件,所以在Android,FireFox 1.1(Nokia N900)上没有transform。Windows Phone 7.5不支持触摸事件,mouse event支持也很糟糕。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表于大前端专区
2016/06/27 10:45

hammerjs demo

http://codepen.io/runspired/pen/YqRgVp

0
0
发表于大前端专区
2019/05/30 11:59

移动端缩放解决方案 hammerjs

本方案适合各种前端成熟框架 以 ionic3为例子 第一步 安装 hammerjs npm install hammerjs 第二步 写核心缩放功能 import * as Hammer from 'hammerjs'; // 缩放功能 export class PinchZoom { static hammerIt(elmid: string) { const elm = document.getElementById(elmid); console.log('hammerIt begin elm', elm); const hammertime = new Hammer(elm, { touchAction: 'pan-x pan-y' }); //...

0
1
发表了博客
2019/04/16 17:35

react 利用react-hammerjs插件实现滑动特效和点击特效

react-hammerjs是一款由hammer.js的JS插件来实现在react中实现手势滑动的事件插件, 它有各种各样的手势支持效果,这里我们就使用下它最简单的3种效果来实现我们要的动画 分别是点击(onTap)、滑动(onPan)、滑动结束(onPanEnd) 具体事件参数和其它事件可以参考官网 动画效果 上代码 import React from 'react' import {draw} from './canvas' import Hammer from 'react-hammerjs' import axios from './../axios' imp...

0
0
发表了博客
2018/11/12 00:10

Vue + MintUI + HammerJS + Cordova的hybrid应用开发记录笔记

记录一些Cordova+Vue进行Hybrid应用开发相关的问题,随缘更新. 环境搭建: 开发环境教程: Vue + Cordova教程: https://itnext.io/make-hybrid-platform-cordova-vue-webpack-2fb7031c4f9b 环境变量和SDK什么的请看Cordova官网: https://cordova.apache.org/docs/en/8.x/guide/platforms/android/index.html 文脏介绍比较详细不再多介绍。 Cordova本质上就是一个WebView 加一堆平台插件,上面链接里的教程其实就是修改了Vue c...

0
0
发表了博客
2019/11/05 14:42

ionic4默认不能使用手势事件,解决方法

参考:https://www.jianshu.com/p/53f64ea1de4f 首先需要安装hammerjs ,在项目目录下执行: npm install hammerjs --save 在项目的src/main.ts 中引入hammerjs: import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; import 'hamm...

0
0
发表了博客
2019/09/24 09:22

Angular Material的安装和使用

一、安装 1.前期准备:npm(安装node即可),angular cli脚手架 2.自建项目 ng new my-app //my-app项目名字 ng g c project //组件名project 3.安装angular material和angular cdk //npm方法 npm install --save @angular/material @angular/cdk //yarn方法 yarn add @angular/material @angular/cdk 4.常用项animations(非必备) //npm方法 npm install --save @angular/animations //yarn方法 yarn add @angular/animations 5...

0
0
发表了博客
2018/06/16 09:52

认识hammer.js

hammerjs是什么   hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势。   hammerjs的两大优势如下: 为移动端网页添加相关手势。 去除移动端上的点击事件的300ms延迟。 为什么使用hammerjs   诚然,我们可以通过touch的四个事件等来完成相同的功能,但是不可避免的会比较麻烦,所以既然前人已经造了这个好轮子,为什么不去使用呢? 另外,300ms的延迟有时是我们不需要的,比如,我们在做webapp时,不需要...

0
0
发表了博客
2019/06/04 11:00

Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件

1、ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button defaultHref="/tabs/tab1"></ion-back-button> </ion-buttons> <ion-title>actionsheet</ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-button (click)="showAction()"> 弹出actionSheet </io...

0
0
发表了博客
2018/02/22 12:57

Material使用11 核心模块和共享模块、 如何使用@angular/material

1 创建项目   1.1 版本说明             1.2 创建模块     1.2.1 核心模块       该模块只加载一次,主要存放一些核心的组件及服务       ng g m core       1.2.1.1 创建一些核心组件         页眉组件:header           ng g c core/header --module core         内容组件:main           ng g c core/main --module core         页脚组件...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
66 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部