zoukankan      html  css  js  c++  java
  • hammer用法 jquery.hammer.js

    jquery.hammer.js使用时要先引入hammer.min.js
    下面代码是滑动效果:
      $("#nav").hammer().bind('swiperight', function (e) {
                    $("#result").html(e.gesture.deltaX)
                    var currPos = $(".menu").scrollLeft();
                    var currPos = $(".menu").scrollLeft();
                    var p = currPos - e.gesture.deltaX * 3;
                    if (p > $("#menu").offset().left) {
                    p= $("#menu").offset().left;
                    }
                    // $("#menu").scrollLeft($("#menu").scrollLeft() - e.gesture.deltaX);
                    $("#menu").animate({ scrollLeft: p + "px" }, "slow");
                });
     
    然后在使用!一下是hammer中对应e的参数信息█是一级属性:两端的为2级属性!
    比如e的属性有type,gesture 
    其中gesture的属性有pointers,changedPointers,pointerType 下一个█之前

    在手机上输出参数!

    没找到在电脑上调试hammer的方法!所以只能在手机上输出到层里面!
      $("#nav").hammer().bind('swipeleft', function (e) {
                    $("#result").html(e.gesture.deltaX)
                    //$("#menu").scrollLeft($("#menu").scrollLeft() - e.gesture.deltaX);
                    var currPos = $(".menu").scrollLeft();
                    var p = currPos - e.gesture.deltaX * 3;
                    if (p <= 0)
                        p = 0;
                    $("#menu").animate({ scrollLeft: p + "px" }, "slow");
                    
                                                    for (a in e) {
                                                        document.getElementById("result").innerHTML += a + "█<br/>";
                                                        if (e[a] instanceof Object) {

                                                            for (b in e[a]) {
                                                                document.getElementById("result").innerHTML += b + ":<br/>";
                                                                document.getElementById("result").innerHTML += e[a][b] + "<br/>";
                                                            }
                                                            document.getElementById["result"] += "<br/>";
                                                        }
                                                        else {
                                                            document.getElementById("result").innerHTML += "|" + e[a] + "<br/>";
                                                        }

                                                    }
                });
     

    层里获取到的e参数

     
      type█
    |swipeleft
    gesture█

    pointers:
    [object Touch]

    changedPointers:
    [object Touch]

    pointerType:
    touch

    srcEvent:
    [object TouchEvent]

    isFirst:
    false

    isFinal:
    true

    eventType:
    4

    center:
    [object Object]

    timeStamp:
    1433406137249

    deltaTime:
    117

    angle:
    169.11447294534125

    distance:
    52.952809179494906

    deltaX:
    -52
    deltaY:
    10
    offsetDirection:
    4
    scale:
    1
    rotation:
    0
    velocity:
    0.9705882352941176
    velocityX:
    0.9705882352941176
    velocityY:
    -0.23529411764705882
    direction:
    2
    target:
    [object HTMLDivElement]
    timeStamp█
    |1433406137250
    jQuery20009665961118880659█
    |true
    isTrigger█
    |3
    namespace█
    |
    namespace_re█
    |null
    result█
    |undefined
    target█
    nodeName:
    DIV
    spellcheck:
    true
    previousElementSibling:
    [object HTMLDivElement]
    offsetTop:
    0
    firstChild:
    [object Text]
    lastElementChild:
    [object HTMLDivElement]
    outerText:
    aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp 
    innerHTML:
    aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp
  • 相关阅读:
    如何将Flex项目转成AIR
    用Flex绘制带Icon的Tooltip
    定制流动的link
    TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目(二)
    如何让Flex的Tree显示水平滚动条
    TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目(一)
    TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目(三)
    告警传播过滤树节点
    TWaver HTML5 + Node.js + express + socket.io + redis(四)
    Developers dashboard in SharePoint 2010
  • 原文地址:https://www.cnblogs.com/360qq/p/4552254.html
Copyright © 2011-2022 走看看