-1

このウェブサイトhttp://www.qvivo.com/で使用されている効果を達成しようとしています。jqueryは正常に機能しています。私の問題は、左側のパネル/サイドバーが展開したときにメインコンテンツのサイズを自動変更する方法です。みんなを助けてください。前もって感謝します。

4

2 に答える 2

3

QVIVOのリアムはこちら。サイトのフレームワークを模倣するために、簡単なjsFiddle（http://jsfiddle.net/fZy6z/ ）を作成しました。

私の主なアドバイスは、ブラウザにほとんどの作業を任せるようにすることです。JQueryを使用してDOMをアニメーション化する代わりに、CSSトランジションを使用してクラスタグを追加および削除しました。最初はメリットがわかりませんが、右側のパネルを複雑なDOMツリーで埋め始めると、スムーズにアニメーション化する唯一の方法は、ハードウェアアクセラレーションによるトランジションを使用することです。

メインコンテンツの自動サイズ変更の問題に関しては、非常に簡単です。とにかくページの幅に自動拡張されるため、含まれているdivの幅の値を宣言しないでください。これらのdiv内のコンテンツには、100％の幅の値を指定できます。

乾杯、リアム

于 2012-09-20T02:00:28.383 に答える
1

私はJqueryが得意ではないので、JavaScriptと少し混ぜ合わせます。

あなたはあなたが望むものと見た目の幅％で遊ぶ必要があるでしょう。

CSSから、最初にクラスpannel_buttonを配置します。絶対に配置します。左のフロートも外します

.panel_button{
    height: 50px;
    width: 50px;
    cursor: pointer;
    background-image: url(images/arrow.png);
    background-position: center center;
    background-repeat: no-repeat;
    border: thin solid #CCC;
    margin-left: -1px;
    top: 200px;
    position:absolute;
}

次に、JqueryとJavaScriptの一部について、JSの方が優れているので、この方法でアニメーションを作成しました。

var content = document.getElementsByClassName("content");
$('.panel_button').click(function()
{
    $(".panel").animate({width:'toggle'},500); 

    if( content[0].style.width=="70%" ){ 
        $(".content").animate({width:"90%"},500);
           $(".panel_button").animate({left:"0%"},500); 
    }
    else{  $(".content").animate({width:"70%"},500);
           $(".panel_button").animate({left:"29%"},500); 
          }
});

しかし、私が言ったように、あなたはあなたが本当にそれを望むところにあなたのボタンを作るために幅と位置で遊ぶ必要があるでしょう。また、ホバー用に残っているフロートを取り外します。

于 2012-09-20T02:25:22.880 に答える