1

私はJavaScriptの初心者です。テキスト リンクをクリックするとコンテナ内で上下に移動する div をコーディングする方法を知りたいです。

私が理解していないのはテキストの回転部分です。jquery animate cssのトップ調整を使用して、divの上下の移動をトリガーできると思います。

しかし、スクリプトを作成する方法がわかりません.click関数> divを下にトリガーすると、矢印のテキストが上に回転します^、そうでない場合は、divを上にトリガーし、矢印のテキストが下に回転しますv（または下向きの矢印vである元の状態に戻ります）。

私はjQueryを実現したいという同様の答えを見つけました：クリック関数で回転divをトグルするif（）ステートメントの使用方法を知っていれば素晴らしいでしょう。中に何を入れたらいいのかわからない！T_T

例としては、この Web サイトの上部の黒いパネルです。ページの右側に小さな矢印タブがあり、上部パネルを非表示/表示または上下に移動するようにトリガーします。

4

1 に答える 1

1

このようなもの？

実際の例はこちら: http://jsfiddle.net/GaJBy/1/

サードパーティの jQueryRotate プラグイン ( http://www.nealfletcher.co.uk/js/jQueryRotate.js ) を使用していることに注意してください。

CSS:

#outerDiv {
    position: relative; 
    height: 300px; 
    width: 300px; 
    background: #FFF; 
    border: 1px solid #A0A0A0
}

#innerDiv {
    position: absolute; 
    border: 1px solid #CCC; 
    width: 50px; 
    height: 50px; 
    vertical-align: middle; 
    text-align: center;
    font-size: 36px
}

HTML:

<div id="outerDiv">
    <div id="innerDiv">↓&lt;/div>
</div>

JS:

$("#innerDiv").click(function () { // Attach click listener
    var duration = 500;
    // If the square is not at the top, go down otherwise go back up       
    if (parseInt($(this).css("top")) > 0) {
        finalPosition = 0;
        startingAngle = 180;
        endingAngle = 0;
    } else {
        finalPosition = $("#outerDiv").height() - $(this).height();
        startingAngle = 0;
        endingAngle = 180;
    }

    $(this).rotate({
        angle: startingAngle,
        animateTo: endingAngle,
        duration: duration
    });

    $(this).animate({
        top: finalPosition
    }, duration);
});
于 2013-06-27T16:34:31.923 に答える