Как использовать Hammer для прокрутки

Я нашел интересный ресурс: Hammer.js. Я попытался пролистнуть с помощью Hammer и jQuery.

1) Я загрузил код здесь
2) Я поместил этот код в документ. Я поместил ссылку на этот код в начале документа, который я хочу использовать: <script src="hammer.js"></script>
3) Я не знаю, как его использовать. Я пытаюсь сделать что-то подобное в jQuery. Я имею в виду, что я хочу прокрутить, а не щелкнуть:

$(function(){
    $(".blue").click(function() {
        $(".blue").animate({left: "0"}, 500)    
    });
})

http://jsfiddle.net/Narcis/rmtXC/

Ответы

Ответ 1

Что-то вроде этого? http://jsfiddle.net/6jxbv/119/

Я использую Hammer(element).on("event", callback); для получения результата. В этом случае я добавил события swipeleft и swiperight.

script использует описанный выше синтаксис для добавления таких событий, как:

drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
swipe, swipeup, swipedown, swipeleft, swiperight

Если вы хотите использовать его с jQuery, они предоставляют этот синтаксис (который вызывает неудобства, если вы меня спрашиваете):

$(elementOrSelector).hammer().on("event", function(event) {
    //callback
});

Но вы должны включить плагин jquery.hammer.js

Попробуйте прочитать документы для получения дополнительной информации

EDIT:

Здесь вы можете увидеть пример с помощью прокрутки и перетаскивания. Учтите, что салфетки - это быстрое движение (с помощью мыши или касания), а перетаскивание - нажатие и перемещение (поэтому реализация не правильная, но я оставлю вам одинаковую:):)

http://jsfiddle.net/uZjCB/183/ и полноэкранный http://jsfiddle.net/uZjCB/183/embedded/result/

Надеюсь, что это поможет

Ответ 2

С помощью Hammer.js 2.0 вам необходимо использовать Recognizer:

var blue      = document.getElementById('blue');
var hammer    = new Hammer.Manager(blue);
var swipe     = new Hammer.Swipe();

hammer.add(swipe);

hammer.on('swipeleft', function(){
   $(blue).animate({left: "-=100"}, 500)  
});

hammer.on('swiperight', function(){
   $(blue).animate({left: "+=100"}, 500)  
});

подробнее о Hammer документация

Ответ 3

обновление скрипта JS с правильной версией Hammer cdn, поэтому теперь она работает:

$(function(){  
var red = document.getElementById("red");
var blue = document.getElementById("blue");

//Swipe
Hammer(red).on("swipeleft", function() {
    $(this).find(".color").animate({left: "-=100"}, 500);
    $("#event").text("swipe left");
});

Hammer(red).on("swiperight", function() {
    $(this).find(".color").animate({left: "+=100"}, 500);
    $("#event").text("swipe right");
});

// Drag
Hammer(blue).on("dragleft", function() {
    $(this).find(".color").animate({left: "-=100"}, 500);
    $("#event").text("drag left");
});

Hammer(blue).on("dragright", function() {
    $(this).find(".color").animate({left: "+=100"}, 500);
    $("#event").text("drag right");
});

});