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);
       });
  • 相关阅读:
    《花好月圆夜》
    关于Url重写
    三大WEB服务器对比分析(apache ,lighttpd,nginx)
    APC 和 Memcache 有什么区别,哪个更好效率更高?
    URL优化不仅仅是静态化重写URL
    php中的静态变量和动态变量的区别框架加载变量时运用
    msicuu.exe (msizap.exe),程序的作用
    显示器接口针脚定义(Dsub15)
    图文教程:DIY全屏开机LOGO详解
    ASP.NET中的媒体播放
  • 原文地址:https://www.cnblogs.com/axl234/p/5591069.html
Copyright © 2011-2022 走看看