javascript - 使用 hammer.js 循环从第一个 if 跳到第二个

Question

我想使用 hammer.js pinchout 选项来切换图像(使它们变大并淡化)。我已经将图像放在一些 div 的背景中，我更改了 css background 属性以使它们变大并消失。使用 webkit 制作动画。

到目前为止，一切正常。但我试图制作一个简单的开关循环来一个接一个地更改 div。我首先使用 if 和 if else 以及一个 var 作为开关，然后使用开关选项。问题是 iPad 忽略了刹车或暂停，只是出于某种原因后悔地运行代码。当我运行代码并尝试 pinchout 2 个图像一个接一个地改变时，给出的警报是 x-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.
}