jQuery卷軸不允許反轉

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

你需要檢查在「泛」事件中的X或Y位置，並返回false，如果它小於上「向下」 X或Y位置這樣

$('#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/