2012-06-26 57 views
2

當我們構建html5 web應用程序或ios混合應用程序時,我們需要在ios應用程序中創建一個類似於視圖轉換的效果。有沒有一個JavaScript庫可以處理整個頁面幻燈片?

如:http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

在過去使用jQuery移動或煎茶觸摸來處理它。

但是,你知道,jquery mobile依賴於許多庫或css(如:jquery,jquerymobile.css等)和sencha touch太重了。

我只想找到一個簡單的JavaScript庫,可以幫助我處理這個問題。

我也希望這個庫是純粹和易於使用的。

有沒有一個JavaScript庫可以處理這個問題?:-)

回答

1

頁一組數字之間滑動,也許這可以幫助你:HTML Page Slide Without a Framework

的解決方案是非常輕便,是由一個小AJAX,一些CSS轉換和CSS轉換事件驅動。同樣重要的是要注意,這隻適用於WebKit。 (這種情況是針對PhoneGap針對Android和iOS的移動應用程序,因此它只需要WebKit兼容性。)

+0

非常感謝... –

0

您可能想看看Swipe,尤其是因爲這也適用於iOS,因爲它檢測到滑動並且the demo顯示對幻燈片的支持。

有這裏提出,在Stack Overflow上其他一些很好的解決方案,在這個問題上:Sliding An Entire Web Page你可能想看看答案在那裏,接受了一個確實爲

整個頁面的滑動

[編輯]根據你的技能,你可以嘗試爲滑動做出自己的香草(純)javascript功能。這就是我最終做的,使用html5的translate3d css屬性。

例如,這裏是我用來生成CSS代碼的功能:

//generates transformation styles for Opera, Chrome, Firefox and IE 
function genTransform (x, y, z, dur) { 
    var genStyle = '-webkit-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -webkit-transition: ' + dur + 'ms;' + 
       '-moz-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -moz-transition: ' + dur + 'ms;' + 
       '-ms-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -ms-transition: ' + dur + 'ms;' + 
       '-o-transform: translate(' + x + 'px, ' + y + 'px); -o-transition: ' + dur + 'ms;' + 
       'transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); transition: ' + dur + 'ms;'; 

    return genStyle; 
} 

我那麼樣式應用到我的div讓他們根據我的需求下滑。這其實很簡單,如果你只是