zoukankan      html  css  js  c++  java
  • 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库

    hammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档。

    使用方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    // 先要对监听的DOM进行一些初始化
    var hammer = new Hammer(document.getElementById("container"));
     
    // 然后加入相应的回调函数即可
    hammer.ondragstart = function(ev) { };  // 开始拖动
    hammer.ondrag = function(ev) { }; // 拖动中
    hammer.ondragend = function(ev) { }; // 拖动结束
    hammer.onswipe = function(ev) { }; // 滑动
     
    hammer.ontap = function(ev) { }; // 单击
    hammer.ondoubletap = function(ev) { }; //双击
    hammer.onhold = function(ev) { }; // 长按
     
    hammer.ontransformstart = function(ev) { }; // 双指收张开始
    hammer.ontransform = function(ev) { }; // 双指收张中
    hammer.ontransformend = function(ev) { }; // 双指收张结束
     
    hammer.onrelease = function(ev) { }; // 手指离开屏幕

    还支持jQuery插件的形式调用

    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    $("#element")
       .hammer({
            // 对DOM进行一些初始化,这里可以加入一些参数
       })
       .bind("tap", function(ev) {
            console.log(ev);
       });

    官网地址:http://eightmedia.github.com/hammer.js/  (带演示)
    源码地址:https://github.com/EightMedia/hammer.js

    文件大小: 23K(源码)、6K(minified)

  • 相关阅读:
    算术运算符
    短路运算
    基本运算符
    类型转换
    数据类型讲解
    关键字
    河北省重大技术需求征集八稿第六天
    河北省重大技术需求征集八稿第五天
    河北省重大技术需求征集八稿第四天
    河北省重大技术需求征集八稿第三天
  • 原文地址:https://www.cnblogs.com/zhwl/p/3525238.html
Copyright © 2011-2022 走看看