-6

これは、これまでで最も難しい質問かもしれません。しかし、どうすればこれを私のhtmlで動作させることができますか?

HTML

<div class="test2"></div>

<div class="test"></div>

<div class="test3"></div>

CSS

.test2 {margin-top: 250px;
       position:absolute;
       left: -100px;
       width:100px;
       height:100px;
       background: aqua;
}

.test {margin-top: 500px;
       position:absolute;
       right: -100px;
       width:100px;
       height:100px;
       background: aqua;
}

.test3 {margin-top: 1000px;
       position:absolute;
       right: 100px;
       width:100px;
       height:100px;
       background: aqua;
} ​​

JS

var $test2 = $(".test2");
$(window).scroll(function() {
    if ($(this).scrollTop() > 20) {
        $test2.stop().animate({
            left: "200px"
        }, 200);
    }
});    

var $test = $(".test");
$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $test.stop().animate({
            right: "200px"
        }, 400);
    }
});​

http://jsfiddle.net/maxmitch/UgEu6/ (完全なサンプル)

4

2 に答える 2

1

jsFiddle の 1 ページの作業バージョンを取得する簡単な方法は、「全画面表示の結果を共有する」リンクを使用することです。たとえば、jsfiddle.net/maxmitch/UgEu6/embedded/result/ です。

次に、メイン フレームを右クリックしてソース コードをコピーするだけです。jsFiddle の「CSS の正規化」オプションを使用している場合は、表示される CSS ファイルへのパスを調整する必要があることに注意してください。

于 2012-11-16T18:20:53.410 に答える
0

「あなたのhtmlで？」私は...「あなたのhtml」では機能しません。そこに3つのファイルがあります。JavaScript ファイル、CSS ファイル、および HTML ファイル。

onDomReady左側では、イベントでjQuery 1.7.2 ライブラリを使用していることがわかります。

$(document).ready(function(){
    // code to execute
})

それぞれに 3 つの個別のファイルを作成する必要があります。CSS および Javascript ファイルを HTML ドキュメントに取り込む方法を知っておく必要があります。わからなかったらググってください。

于 2012-11-16T18:18:34.467 に答える