Question

我想强制我的卷轴动画始终向前，而不是反过来（即动画帧数应该只是每个变大，永远不允许变小）。

有没有明智的方法可以做到这一点？

为了清晰起见进行编辑：

我使用jQuery reel创建一个简单的动画。动画由10张图片组成（01.png，02.png，03.png ...）。卷轴的默认行为是当用户点击/触摸图像并向左或向右拖动时播放动画。

当用户向右拖动时，它会以正确的顺序播放动画 - 基本上从01.png，02.png，03.png前进......这里没有问题。

当用户向左拖动时，它会反向播放动画 - 03.png，02.png，01.png，10.png，09.png ...我不喜欢这个，我想要禁用它。

所以我正在寻找一种方法，只允许动画以“前进模式”播放并禁用“反向模式”。换句话说，我希望能够禁用向左拖动或向左平移。

这有意义吗？

Answer 1

你需要检查“pan”事件中的X或Y位置，如果它小于“向下”的X或Y位置，则返回false

$('#your_reel_image').on('down', function(e, x, y, ev){
    $(this).data("lastPosition",{"x":x,"y":y});//store the position on mousedown
}).on('pan', function(e,x,y,ev){//event when you do a mousemove while the mousedown
    var $reel=$(this);
    var delta=$reel.data("lastPosition").x-x;//difference between current and last position
    if(delta<0){
        $reel.data("lastPosition",{"x":x,"y":y});//update position
        $reel.data("direction","right");//set current direction to right
    }
    else if(delta>0){
        $reel.data("direction","left");//set current direction to left
        return false;//prevent the reverse animation
    }
});

我还在fractionChange中添加了一个函数，以防止在只将光标向左移动时发生的1帧反向动画

$('#your_reel_image').on('fractionChange',function(){
    if($(this).data("direction")=="left"){//if the current direction is left
        $(this).data("direction","")//clear the current direction
        return false;//return false prevent the 1 frame animation 
        //without the last line you can return 1 frame at a time on mouseup 
    }
});

如果要阻止鼠标滚轮上的反向动画，则需要添加此功能

$('#your_reel_image').on('wheel',function(e, distance, ev){
    var $reel=$(this);
    //almost the same as in the pan function without storing the position
    if(distance<0){
        $reel.data("direction","right");
    }
    else if(distance>0){
        $reel.data("direction","left");
        return false;
    }
});

http://jsfiddle.net/N68qa/1/

jQuery卷不允许反向

1 个答案: