在手機上通過div滑動

爲了節省移動版本的空間，我正在建立一個網站，我想讓用戶通過包含多個div的幾個部分水平滑動，就像在Facebook應用上一樣。然而，需要刷卡內容是div內。在手機上通過div滑動

框架如jQuery Mobile和JQTouch似乎並不適用，因爲它們被設計用來作爲一個框架。

我試過使用SwipeView,JQSwipe，以及jQuery移動和jQTouch框架。

那麼，有沒有人知道任何獨立的JS或jQ插件，給div的刷卡功能？一個人的我發現迄今要麼似乎沒有工作或需要以不同的方式組織內容，我有什麼。

理想情況下，HTML看起來像：

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

非常相似，我想多少滑塊的工作設想。

來源

2013-08-02 lukeseager

嗯，這很奇怪。當我加載JQ手機在我的網站，它隱藏的所有內容，並說：「裝載」，在頁面的底部：S – lukeseager

http://stackoverflow.com/questions/8648596/how-to-use-jquery-mobile - 因爲，它的觸摸事件支持只-NO-UI的改進 – jwatts1980

看看添加3個事件監聽器到你的DIV來創建自己的刷卡效果。 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-02 14:22:43 alQemist

在手機上通過div滑動

回答

相關問題