如何通过平移手势实现容器中元素的悬停效果?
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';
}
});
效果类似于手指在字母上方悬停的任何移动键盘。
答案 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');
}
});