1

フェードを行う方法や、Javascript での同様の効果を学びたいと思います。Jquery や mootools などを使用しない理由などの回答が得られることがよくあります。まあ、私は物事がどのように機能するかを学びたいのですが、これらのフレームワークを使用してもかまいません。

私は現在、DOM の変更について学んでいるので、このテーマに関する多くの記事を読みました。また、Reflow について読んだことがありますが、Repaint でクールなものは見つかりませんでしたが、検索を続けます。

ソースファイルなどを見ると、いくつかのメソッドが表示されますが、それらが作成したのか、それとも JS のコアメソッドなのかわかりません。

私の質問は、滑らかな位置の変更、不透明度による要素のフェードなど、このすべてのきちんとしたことを学ぶことができるリソースはありますか?

4

3 に答える 3

2

emile.jsを見てください。新品未使用です。自分で行う方法を学ぶのに最適な方法です。

最近の jsconf カンファレンスで紹介されました。Thomas Fuchs (script.aculo.us) によって書かれました。

http://github.com/madrobby/emile

Émile スタンドアロン CSS アニメーション

JavaScript ミニフレームワーク

JavaScript フレームワークは必要ありません

アニメーション用の CSS プロパティの完全なセット (長さベースおよび色)

イージングとコールバック

50 行未満のコード

Twitter で最新情報を入手: http://twitter.com/emilejs

于 2009-11-12T22:46:05.603 に答える
1

これは、FirefoxとChromeで機能する例です。つまり、不透明度のスタイルを尊重しません。

    var ELEMENT;
    var STEPS;
    var INTERVAL;
    var COUNT;
    var TIMERID;

    // 5 * 200ms = 1 second
    STEPS = 5;
    INTERVAL = 200;

    function Button1_onclick() {

        ELEMENT = document.getElementById("foo");
        COUNT = STEPS - 1;
        TIMERID = setInterval(Fade, INTERVAL);
    }

    function Fade() {

        ELEMENT.style.opacity = String(COUNT / STEPS);
        COUNT--;

        if (COUNT < 0) {
            clearInterval(TIMERID);
            TIMERID = 0;
        }
    }

setIntervalとclearIntervalは標準のjs関数です。xミリ秒ごとに指定された関数を実行します。私たちの場合、不透明度が0に達したときにそれを殺します。

ウィンドウのスライドも同様のプロセスです。不透明度ではなく、左/右/上/下のスタイルを設定します。

于 2009-11-12T22:36:34.437 に答える
0

JavaScript を使用したフェードは、基本的に要素の不透明度をプログラムで変更することです。「滑らかさ」はタイマーを使用して行われます。位置・サイズ変更も同様。必要な効果のためにJavaScriptを使用して制御する必要がある要素のスタイルプロパティを理解するには、cssを読む必要があります。

本当に興味がある場合は、github で yui のソースに飛び込むことができます: http://github.com/yui

于 2009-11-12T22:06:11.080 に答える