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);
       });
  • 相关阅读:
    div设置参数contenteditable=true
    Html事件总结
    PHP的isset()和empty()比较
    jQuery的ajax和遍历数组json代码
    PHP获取域名的几个函数使用
    关于网站favicon.ico
    PROCEDURE ANALYSE 通过分析select查询结果
    mysql 存在更新 不存在插入
    MySQL Migration Toolkit的使用
    高性能MySQL读书笔记:找出谁持有锁
  • 原文地址:https://www.cnblogs.com/axl234/p/5591069.html
Copyright © 2011-2022 走看看