2014-09-10 73 views
1

hammer.js(http://hammerjs.github.io/recognizer-swipe/)檢查滑動的速度,我想知道如何得到這個值,以便確定我的元素#visitContent的邊距應該是多大,並且獲得更平滑的滑動。獲取滑動的速度值?

HTML

<section id="visits"> 
      <div id='visitsContent'> 
       <div></div> 
       <div></div> 
       <div></div> 
      </div> 
     </section> 

的Javascript

var visits = document.getElementById('visits'); 
var mc = new Hammer(visits, {velocity:0.80}); 

mc.on("swipeleft", function(ev) { 
    $('#visitsContent').css({ 
    marginLeft : '-=200px' 
}) 
}); 
mc.on("swiperight", function(ev) { 
    $('#visitsContent').css({ 
    marginLeft : '+=200px' 
}) 
}); 

青菜

#visits 
    width: 100% 
    padding: 0px 
    border-bottom: none 
    background-color: $backgroundColorSecond 
    margin-bottom: 10px 
    margin-left: -20px 
    #visitsContent 
     div 
      width: 180px 
      height: 180px 
      float: left 
      margin-left: 5px 
      background-color: green 
      color: black 
      text-align: center 

也有小提琴 http://jsfiddle.net/mL911mqn/

回答

2

士師記從你的jsfiddle看起來你正在使用平移手勢,而不是滑動手勢。因此,在您的平移事件處理程序中,您應該可以像這樣訪問拖動速度:

function panGestureHandler(ev){ 
    var velocity = ev.gesture.velocity; 
    var velocityX = ev.gesture.velocityX; 
    var velocityY = ev.gesture.velocityY; 
    console.log("horizontal drag speed = " + velocityX); 
}