用JavaScript滑动手势：直接翻动滑动位置到元素的位置？

我使用Zepto.js作为移动Web应用程序。 Zepto带有方便的方法，如swipe,swipeLeft和swipeRight。用JavaScript滑动手势：直接翻动滑动位置到元素的位置？

例如：swipeLeft手势触发一次向左滑动已完成。至少我是这么看的。

是否可以使用此轻扫手势更新具有实时值的元素的位置。

因此，当在我的文档上向左缓慢滑动时，我需要div.layer与我一起缓慢移动。当达到临界点时，layer应该捕捉到预定位置。

这有可能以某种方式。如果Zepto不可能的话，我会选择一个不同的框架。

我有什么权利现在

HTML

<div class="page-wrap"> 

    <section class="layer" id="one"> 

    </section> 

    <section class="layer" id="two"> 

    </section> 

</div>

CSS

.page-wrap { 
    position:relative; 
    width:100%; 
    height:100%; 
} 

.page-wrap .layer { 
    width:100%; 
    height:100%;  
    position:absolute; 
    top:0; 
} 

.page-wrap #one { 
    background:red; 
} 

.page-wrap #two { 
    left:-100%; 
    background:green; 
}

$(document).ready(function() { 
    $('#two').swipeRight(function(e) { 
     showInfos(true); 
    }); 

    $('#one').swipeLeft(function(e) { 
     showInfos(false); 
    }); 
}); 

function showInfos(show) { 
    $("#two").animate({ 
     left: show?'0':'-100%' 
    }, 200, 'ease-out'); 
}

This Works！ .layer#two位于可见视口之外。当在.layer#one上向右滑动时，.layer#two从左侧滑入。当在.layer#two上向左滑动时，.layer#two滑回到左侧。

这正是我想让我的应用程序做的事情。该模式是众所周知的，很多应用程序都使用这种UI模式。

然而，我想要它做的就像它在手机上的原生应用程序那样沿着.layer的.layer更新它们相对于用户的手指的位置时的手指。所以我不希望一旦swipe手势完成后动画就会生效。我希望.layer#two的position在刷卡时更新。

也许你想活在某个地方进行测试。我在上面提供了jsfiddle的片段。

我真的很感谢这个帮助。或者提示和技巧。我想我可能不是唯一对此感兴趣的人。

来源

2012-10-11 matt

考虑使用自己的触摸事件处理程序：http://www.html5rocks.com/en/mobile/touch/

示例中拖动一个div，从该网页：

var obj = document.getElementById('id'); 
obj.addEventListener('touchmove', function(event) { 
    // If there's exactly one finger inside this element 
    if (event.targetTouches.length == 1) { 
    var touch = event.targetTouches[0]; 
    // Place element where the finger is 
    obj.style.left = touch.pageX + 'px'; 
    obj.style.top = touch.pageY + 'px'; 
    } 
}, false);

如果您更新只需更改x坐标，你应该是近完成。

来源

2012-10-11 10:44:02

谢谢，似乎对我来说真的很不稳定。 – matt

使用webkit转换而不是left/top。 – Ronald

用JavaScript滑动手势：直接翻动滑动位置到元素的位置？

回答

相关问题