JavaScript Hammer 例子

JavaScript 處理 DOM 操作，是前端開發(fā)中最常用的技術(shù)之一。而 HammerJS 作為一個(gè)優(yōu)秀的手勢庫，可以方便地實(shí)現(xiàn)移動(dòng)端手勢交互。本文將介紹幾個(gè) HammerJS 的例子，幫助讀者快速了解它的基本使用方法。

移動(dòng)端輪播圖

輪播圖是移動(dòng)端網(wǎng)站中常見的組件之一。使用 HammerJS 可以很方便地實(shí)現(xiàn)輪播圖的手勢交互。

var wrap = document.getElementById('wrap');
var hammertime = new Hammer(wrap);
hammertime.on('swipeleft',function(){
// 向左滑動(dòng)
});
hammertime.on('swiperight',function(){
// 向右滑動(dòng)
});

在上面的代碼中，我們使用 HammerJS 監(jiān)聽容器 wrap 的 swipeleft 和 swiperight 事件，來實(shí)現(xiàn)左右滑動(dòng)。

拖拽交互

拖拽交互也常見于移動(dòng)端網(wǎng)站，特別是一些畫板、拖拽排序等需要進(jìn)行拖拽交互的頁面。使用 HammerJS 可以很方便地實(shí)現(xiàn)這一功能。

var item = document.getElementById('item');
var hammertime = new Hammer(item);
hammertime.on('pan',function(event){
var deltaX = event.deltaX;
var deltaY = event.deltaY;
// 實(shí)現(xiàn)拖拽效果
item.style.left = deltaX + 'px';
item.style.top = deltaY + 'px';
});

在上面的代碼中，我們使用 HammerJS 監(jiān)聽 item 的 pan 事件，來實(shí)現(xiàn)拖拽功能。在事件回調(diào)函數(shù)中，我們通過 event 對象獲取到 deltaX 和 deltaY 值，即拖拽的距離，并將其賦值給 item 的 left 和 top 樣式，即可實(shí)現(xiàn)拖拽效果。

時(shí)間軸交互

時(shí)間軸是一種常見的交互組件，例如在一些新聞或者音樂播放器中，我們可以通過時(shí)間軸來展示文章或者音樂的進(jìn)度。使用 HammerJS 可以很方便地實(shí)現(xiàn)這一功能。

var timeline = document.getElementById('timeline');
var hammertime = new Hammer(timeline);
hammertime.on('pan',function(event){
var deltaX = event.deltaX;
// 實(shí)現(xiàn)時(shí)間軸效果
timeline.style.width = parseInt(timeline.style.width) + deltaX + 'px';
});

在上面的代碼中，我們使用 HammerJS 監(jiān)聽 timeline 的 pan 事件，來實(shí)現(xiàn)時(shí)間軸效果。在事件回調(diào)函數(shù)中，我們通過 event 對象獲取到 deltaX 值，即拖拽的距離，并將其加上 timeline 當(dāng)前的寬度，即可實(shí)現(xiàn)時(shí)間軸的拖拽效果。

總結(jié)

通過以上例子，我們可以看出 HammerJS 作為一個(gè)手勢庫，在移動(dòng)端的交互開發(fā)中有著很大的作用。通過它提供的簡單易用的接口，我們可以很方便地實(shí)現(xiàn)一些復(fù)雜的手勢交互效果，從而帶來更好的用戶體驗(yàn)。