zoukankan      html  css  js  c++  java
  • 多点触控插件Hammer.js

    插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。

    使用方法:

    <script src=<span class="string" style="color: rgb(221, 17, 68);">"http://eightmedia.github.com/hammer.js/hammer.js"</span>></script>
    
    <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 先要对监听的DOM进行一些初始化
    <span class="keyword" style="font-weight: bold;">var hammer = new Hammer(document.getElementById("container"span>));
    
    <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 然后加入相应的回调函数即可
    hammer.ondragstart = function(ev) { };  <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 开始拖动
    hammer.ondrag = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动中
    hammer.ondragend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动结束
    hammer.onswipe = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 滑动
    
    hammer.ontap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 单击
    hammer.ondoubletap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//双击
    hammer.onhold = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 长按
    
    hammer.ontransformstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张开始
    hammer.ontransform = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张中
    hammer.ontransformend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张结束
    
    hammer.onrelease = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 手指离开屏幕

    还支持jQuery插件的形式调用

    <span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>span>
    
    $("#element")
       .hammer({
            // 对DOM进行一些初始化,这里可以加入一些参数
       })
       .bind("tap", function(ev) {
            console.log(ev);
       });
  • 相关阅读:
    Object_Pascal_西门子SCL应用_系列1_初识SCL
    Windows程序设计零基础自学_5_GDI基础_之获取设备内容信息
    Windows程序设计零基础自学_1_Windows程序消息循环机制
    Delphi真的没落了吗?_说Delphi母语Pascal的另一个应用
    C语言学习趣事_关于C语言中的预处理
    C语言学习趣事_关于C语言中的输入输出流
    C语言学习趣事_关于C语言中的空格
    Windows程序设计零基础自学_4_Windows程序的显示和更新_之滚动条处理
    Windows程序设计零基础自学_5_GDI基础
    C语言学习趣事_经典面试题系列_1
  • 原文地址:https://www.cnblogs.com/axl234/p/5591069.html
Copyright © 2011-2022 走看看