2

HTML5 WebアプリまたはiOSハイブリッドアプリを構築するときは、iOSアプリでのビューの遷移のような効果を作成する必要があります。

例：http ：//jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

以前は、jquerymobileまたはsenchatouchを使用して処理していました。

しかし、ご存知のとおり、jquery mobileは多くのライブラリまたはcssに依存しています（jquery、jquerymobile.cssなど）。senchatouchは重すぎます。

この問題を処理するのに役立つ簡単なjavascriptライブラリを見つけたいだけです。

また、このライブラリが純粋で使いやすいことを願っています。

この問題を処理できるjavascriptライブラリはありますか？:-)

4

3 に答える 3

1

多分これはあなたを助けることができます:フレームワークなしの HTML ページ スライド

このソリューションは非常に軽量で、小さな AJAX、いくつかの CSS トランジション、および CSS トランジション イベントによって強化されています。これは WebKit でのみ機能することに注意することも重要です。(このケースは、Android および iOS をターゲットとする PhoneGap を使用するモバイル アプリケーションの場合であるため、WebKit の互換性のみが必要です。)

于 2012-06-27T04:04:24.387 に答える
0

このようなもの？

http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

jQueryは、ブラウザーとプラットフォーム間で確実に機能するため、一般的に最良の選択です。

于 2012-06-26T09:51:33.060 に答える
0

スワイプを検出し、デモでスライドのサポートが示されているため、特にこれは iOS 用でもあるため、Swipeを見てみたいと思うかもしれません。

ここ、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 にスタイルを適用して、必要に応じてスライドさせます。設定された数のページ間をスライドするだけなら、実際には非常に簡単です

于 2012-06-26T09:53:35.977 に答える