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);
       });
  • 相关阅读:
    C#过滤重复数据,使用泛型
    office2007:您正试图运行的函数包含有宏或需要宏语言支持的内容。而在安装此软件时,您(或您的管理员)选择了不安装宏或控件的支持功能
    InstallShield高级应用获取本机所有的SQL服务
    结对项目
    ActiveMQ 初学1:ActiveMQ 创建连接对象
    【JVM】jstack和dump线程分析(2)
    【JVM】jstack 查询占用最大资源线程|排查死循环等
    【java多线程】volatile 关键字
    1.zookeeper原理解析数据存储之Zookeeper内存结构
    【数据算法】Java实现二叉树存储以及遍历
  • 原文地址:https://www.cnblogs.com/axl234/p/5591069.html
Copyright © 2011-2022 走看看