0

わかりましたので、私はjavascriptを初めて使用しますが、jqueryはかなりうまく処理できます...しかし、小さなモバイルWebエクスペリエンスでのjqueryは本当に重いです.

だから私は単にメニューバーをポップアップするこのコードを持っています。これを取得する簡単な方法があるかどうか疑問に思いましたか?

$(function() {
    $('div.menu').hide();
    $("img#menu").click(function () {
          $("div#menu").toggle("slide", {direction: "right"}, 500);
    });
});
4

2 に答える 2

2

あなたのコードを見て、私は次のことを指摘します（コメントを参照）：

$(function() {
    // here you are searching by class name, that is going to eat CPU
    $('div.menu').hide();
    $("img#menu").click(function () {
        // here you are doing a JavaScript animation, eating more of the CPU
        $("div#menu").toggle("slide", {direction: "right"}, 500);
    });
});

JavaScript の代わりに CSS を使用すると、解釈された JavaScript ではなくネイティブ コードに便乗します。

また、多くのモバイル デバイスが 3D CSS トランジションに最適化されていることも秘訣です (3D は、電話の独自の UI で使用されるフリップおよびスライド機能を実行するために使用されるため)。そのため、3D トランジションを使用すると、エンジンからさらに多くの空間が得られます。

CSS を使用したコードの jsFiddle は次のとおりです。

CSS トランジションの優れた紹介は次のとおりです。

于 2012-10-01T00:05:28.457 に答える
1

純粋な CSS を使用して JavaScript を使用せずにメニューをシミュレートできます。メニューを表示したいアイテムの上にマウスを置くための css セレクターを作成するだけですが、この方法ではスライドなどの効果を得ることができません。そのような効果を作成するには、jQuery でコードを読み、JS で実装する必要があります。jquery のソース コードを使用して他のことも処理できますが、セレクター (「div.menu」など) については、Sizzlejs.comの Sizzle を使用できます。 (実際には jQuery は内部的に Sizzle を使用しています)

于 2012-09-30T23:02:33.360 に答える