在Web應用程序中滑動頁面

我想用某種動畫向左/右滑動頁面。（就像iphone應用程序一樣）在Web應用程序中滑動頁面

<body> 
    <div id="page1"> 
     <!-- Full screen content with a button at bottom, on click I want to show #page2 but with slide animation. #page1 will slide-out left and #page2 will slide-in from right--> 
    </div> 
    <div id="page2"> 
     <!-- Full screen content with a button at bottom, on click It will show page1 with slide animation --> 
    </div> 
</body>

來源

2011-03-11 coure2011

假設你有一個「選擇素特德」類所選擇的頁面和‘每一頁頁’級，嘗試一些沿着這些路線：

.page { 
    position:absolute; 
    left:100%; 

    -moz-transition:1s left; 
    -o-transition:1s left; 
    -webkit-transition:1s left; 
    transition:1s left; 
} 

.page.selected { 
    left: 0; 
}

這將Webkit的工作，火狐4和Opera（不記得版本），並會降低優雅地在非支持的瀏覽器上（他們只會一步步從頭到尾）。

來源

2011-03-12 07:31:29

你能查看這個頁面http://204.93.167.12/AppMy/EcoHome/testpage.html並點擊Main Floor，滑動動畫不起作用。 – coure2011 2011-03-13 08:06:43

從我在Web檢查器（ctrl + alt + I）中快速看到的它看起來像幻燈片動畫**是**工作（我手動添加類，因爲通過單擊它沒有被添加，這看起來像一個問題你的JS），只是不顯示頁面。一個猜測是，這是一個Z指數問題。如果不是這樣，簡化的測試案例會有所幫助。 – 2011-03-13 20:11:10

jQuery對動畫HTML元素很有用。

This is a good tutorial關於使用jQuery滑動的各種不同的方法：

此外，您可能想看看某種旋轉木馬插件，並檢查了他們的工作，因爲他們做的非常類似的事情你想要什麼：

來源

2011-03-11 15:37:28 betamax

在Web應用程序中滑動頁面

回答

相關問題