Question

我正在建立一个网站，试图节省移动版本的空间我想让用户在包含多个div的几个部分中横向滑动，就像在Facebook应用上一样。但是，需要滑动的内容在div之内。

jQuery Mobile和JQTouch等框架似乎不适用，因为它们被设计用作框架。

我尝试过使用SwipeView，JQSwipe以及jQuery mobile和jQTouch框架。

那么，有没有人知道任何为div提供滑动功能的独立JS或jQ插件？到目前为止，我发现其中一个似乎不起作用或者需要以与我所拥有的不同的方式组织内容。

理想情况下，HTML看起来像：

<div class="swipe-wrapper">
    <div class="swipe-element">content</div>
    <div class="swipe-element">contnet</div>
    <div class="swipe-element">content</div>
</div>

非常类似于我想象的滑块数量。

Answer 1

看看为DIV添加3个事件监听器以创建自己的滑动效果。 ontouchstart，ontouchmove，ontouchend

然后分别为上面的每个事件调用这些函数....

var startTime,startPoint,endPoint

function moveStart(e){
  startTime = (new Date()).getTime()
  startPoint =  e.originalEvent.pageX   
}

function moving(e){
  endPoint =  e.originalEvent.pageX 
}

function moveEnd(e){
  var d = (new Date()).getTime()
  var secs = (d-startTime)/100
  var delta = startPoint-endPoint

      // if swipe takes longer than .2 of second and less than .6 of a second

  if(secs> 2 && secs <6){

    if(delta>30){ // swipe over at least 30px distance
        //animate the div to move right
    }else if(delta<-30){
        //animate the div to move left
    }
}   
}

在手机上滑动div

1 个答案: