平移悬停HTML元素的手势

时间:2018-03-08 23:18:22

标签: javascript html gesture hammer.js pan

如何通过平移手势实现容器中元素的悬停效果?

example

HTML:

<div class="container">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
</div>

尝试过Hammer.js,但它不像gif那样流畅

var elem = document.getElementById('container');
var hammertime = new Hammer(elem);
hammertime.on('pan', function(ev) {
 if(ev.target.className == 'item') {
   ev.target.style.background='yellow';
 }
});

效果类似于手指在字母上方悬停的任何移动键盘。

1 个答案:

答案 0 :(得分:0)

找到没有hammer.js的解决方案

$('.bars').on("touchend", function(e){
  $(this).removeClass('bars--active');
  $('.bars__item').removeClass('bars__item--active');
});

$('.bars__item').bind('touchmove', function (evt) {
 $('.bars').addClass('bars--active');
 var touch = evt.originalEvent.touches[0];
 var el = $(document.elementFromPoint(touch.clientX, touch.clientY));

 if (el.hasClass('bars__item')) {
    $('.bars__item').removeClass('bars__item--active');
    el.addClass('bars__item--active');  
 }
});