Jquery.hammer.js是一個jquery插件,它將hammer.js的手勢識別功能封裝成了jquery插件,讓自己的web頁面更加的易于使用,也在很多項目上得到了廣泛的應用。
$(function(){ $("#box").hammer().on("swipeleft", function(){ console.log("用戶手指向左滑動了"); }); });
在上面的例子中,我們綁定了一個hammer的swipeleft手勢,當用戶在#box上向左滑動時,就會觸發回調函數,并且在控制臺中打印"用戶手指向左滑動了"。
除了swipeleft之外,jquery.hammer.js還支持tap、doubletap、pinch、rotate、pan等常用手勢。如果你需要支持更多的手勢,也可以直接使用原生的hammer.js庫,并綁定回調函數。
var myElement = document.getElementById('myElement'); var mc = new Hammer(myElement); // 創建一個Pinch和Rotate的識別器 // 這里傳遞了一個額外的參數,用于識別縮放手勢的最小旋轉角度 var pinch = new Hammer.Pinch({threshold: 0}); var rotate = new Hammer.Rotate({threshold: 0}); // 將識別器添加到Manager中 mc.add([pinch, rotate]); // 訂閱用戶事件 mc.on('pinch rotate', function(event) { console.log(event.type); });
在上面的例子中,我們通過hammer.js原生庫來創建了一個包含pinch和rotate識別器的手勢識別器mc,當用戶使用縮放和旋轉手勢時,就會觸發mc的回調函數,并輸出操作類型到控制臺中。