Question

我想使用hammer.js pinchout选项切换图像（使图像更大并淡化它们）。我把图像放在一些div的背景中，我改变了css背景属性，使它们更大并消失。使用webkit动画化所有内容。

到目前为止这一切都有效。但我试图做一个简单的开关循环来一个接一个地改变div。我首先使用if和if else以及var作为开关，然后使用switch选项。问题是iPad忽略了刹车或暂停，只是出于某种原因悔改地运行代码。当我运行代码并尝试pinchout 2个图像一个接一个地改变并且给出的警报是x-3（意味着脚本在开关中的第一个案例之后没有停止并且在执行第二个之前继续到第3个！

请帮忙......

这是代码：

<script type="text/javascript">
var x = 1; // position
var y = 1; // switch
var z = 90; // z-index of layer
var a = 2; // image number (start from image 3 as the first 3 are already set)

window.onload = function() {

    Hammer(document.body).on("pinchout", function() {
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');

        switch (x)
        {
            case 1:
            box1.style.opacity = "0";
            box1.style.backgroundSize = "200% 200%";
            x=x+1;
            a++;
            z--;
            break;

            case 2:
        box2.style.opacity = "0";
        box2.style.backgroundSize = "200% 200%";
        //box1.style.backgroundImage='url("' + a +'.jpg)"';
        box1.style.backgroundSize = "100% 100%";
        box1.style.zIndex= z;
        x++;
        a++;
        z--;
        alert(x);
        break;

            case 3:
        box1.style.opacity = "1";
        box2.style.zIndex= z;
        box3.style.opacity = "0"
        box3.style.backgroundSize = "200% 200%";
        x++;
        a++;
        z--;
        break;

        }


});}



    </script>

Answer 1

确定，得到它了。 pinchout事件不会发生一次火灾。所以你需要添加一些东西来检查它何时结束，然后运行你的代码。像这样：

var isListening = false;
var instance = Hammer(document.body);
instance.on('pinch', function(e) {
  if (isListening) return;
  instance.on('release', onPinchEnd);
});

function onPinchEnd(e) {
  instance.off('release', onPinchEnd);
  alert("here"); // do stuff on pinch end.
}

循环从第一个跳到第二个用hammer.js

1 个答案: