0

我正在建立一个网站，以节省移动版本的空间，我想让用户水平滑动几个包含多个div's 的部分，比如在 Facebook 应用程序上。但是，需要滑动的内容在div.

像 jQuery Mobile 和 JQTouch 这样的框架似乎并不适用，因为它们被设计为用作框架。

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

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

理想情况下，HTML 将类似于：

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

与我想象的滑块工作量非常相似。

4

1 回答 1

0

查看向您的 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
    }
}   
}
于 2013-08-02T14:22:43.267 回答