Javascript は WebQQ インターフェイスを模倣した「フローティング クラウド」を実現し、IE7 以降のバージョンと FF_javascript スキルと互換性があります

まず写真素材をアップロードします。

背景画像:

浮かぶ雲の画像: ←——————————画像Dはこちら~ すべて選択すると見れます(背景が白なので雲は白いですか~)...
CSS コード:

コードをコピー コードは次のとおりです:

コードをコピー

コードは次のとおりです:

理解: StarMove() 関数は、ページがロードされるときに呼び出されます。
JavaScript コード:

コードをコピー

function StartMove() { cloud = document.getElementById("moveCloud");

setInterval(Move, 100); () {

left = 1;
cloud.style.left = left "px"; >}
}



理解: document.documentElement.className = "hScroll"; 目的は CSS スタイルでコードを呼び出すことです。ブラウザのスクロール バー (ナンセンス...上で言いませんでしたか^_^||)
まず、「Floating Cloud」レイヤーの ID を取得する必要があるため、cloud = document を使用します。 getElementById("moveCloud"); クラウドは上で定義されているグローバル変数なので、ここで直接使用できます (ベテランには心配ありません)。スプレー、新しい鳥には「タイマー」を与えます。 " setInterval(Move, 100); Move 関数を 100 ミリ秒ごとに呼び出します;
left = 1; left=left 1 と同等; 上記の関数 (100 ミリ秒ごとに呼び出されます~) と組み合わせて使用​​し、割り当てますこれを「浮遊雲」レイヤーの元の座標に変換します。したがって、cloud.style.left = left "px" として記述されます。何が残っているのか尋ねますか？ CSSスタイルのposition属性です！信じられないなら、DW に位置コロンを書いて、それが出てくるかどうか確認してみてはいかがでしょうか?
if (left >= (screen.width)) ; left = -580; 移動する「浮き雲」の位置が画面の幅以上であれば判定します。画面では、最初から開始させます。左の値は -580 に設定されています。
なぜ -580 に設定するのでしょうか?? CSS を見てください。浮いている雲の画像のサイズは 580*250 です。長さが580pxなので、-580に設定する理由は、右から少しずつ表示させないと、すぐに全体が表示されてしまうからです。
長い間言葉を無駄にしましたが、皆さん (私と同じように) が理解できるかどうかはわかりませんが、以下は完了です。コードを .html ファイルとして保存し、自分で画像をダウンロードして試してみてください。パスを変更するのを忘れてください!
完全なコード:




コードをコピー

コードは次のとおりです: