まず写真素材をアップロードします。 背景画像:浮かぶ雲の画像: ←——————————画像Dはこちら~ すべて選択すると見れます(背景が白なので雲は白いですか~)... CSS コード: コードをコピー コードは次のとおりです: <br>* <br>{ <br>マージン: 0; <br>} <br>ボディ <br>{ <br> 背景: url("Images/body_bg.jpg") 中心 0 を固定 <br>} <br>.cloud <br>{ <br>背景: url("Images/cloud1.png") ; <br>高さ: 250px; <br>幅: 580px; <br>} <br>.hScroll <br>{ <br>} <br>< ;/style> <br><br> <br>理解: .hScroll はブラウザのスクロール バーを非表示にします。そうでない場合は、何が起こっているかが一目でわかるので、意味のない話はしません。 >本文のコード: <br> </div> <br><br><br>コードをコピー<div class="codetitle"> <span><a style="CURSOR: pointer" data="84709" class="copybut" id="copybut84709" onclick="doCopy('code84709')"> コードは次のとおりです:<u></u> </a><body onload ="StartMove()"> </span> </div> </div> <div class="codebody" id="code84709"> 理解: StarMove() 関数は、ページがロードされるときに呼び出されます。<br>JavaScript コード: <br><br><br><br> </div>コードをコピー<br><br><br> <div class="codetitle"> <span> <a style="CURSOR: pointer" data="62683" class="copybut" id="copybut62683" onclick="doCopy('code62683')"><script language=" javascript" type="text/javascript"> <u>var cloud = null </u>var left = 0; .documentElement.className = "hScroll"; </a>function StartMove() { </span>cloud = document.getElementById("moveCloud"); </div>setInterval(Move, 100); () { <div class="codebody" id="code62683">left = 1; <br>cloud.style.left = left "px"; >} <br>} <br></script> <br><br> <br>理解: document.documentElement.className = "hScroll"; 目的は CSS スタイルでコードを呼び出すことです。ブラウザのスクロール バー (ナンセンス...上で言いませんでしたか^_^||) <br>まず、「Floating Cloud」レイヤーの ID を取得する必要があるため、cloud = document を使用します。 getElementById("moveCloud"); クラウドは上で定義されているグローバル変数なので、ここで直接使用できます (ベテランには心配ありません)。スプレー、新しい鳥には「タイマー」を与えます。 " setInterval(Move, 100); Move 関数を 100 ミリ秒ごとに呼び出します; <br>left = 1; left=left 1 と同等; 上記の関数 (100 ミリ秒ごとに呼び出されます~) と組み合わせて使用し、割り当てますこれを「浮遊雲」レイヤーの元の座標に変換します。したがって、cloud.style.left = left "px" として記述されます。何が残っているのか尋ねますか？ CSSスタイルのposition属性です！信じられないなら、DW に位置コロンを書いて、それが出てくるかどうか確認してみてはいかがでしょうか? <br>if (left >= (screen.width)) ; left = -580; 移動する「浮き雲」の位置が画面の幅以上であれば判定します。画面では、最初から開始させます。左の値は -580 に設定されています。<br> なぜ -580 に設定するのでしょうか?? CSS を見てください。浮いている雲の画像のサイズは 580*250 です。長さが580pxなので、-580に設定する理由は、右から少しずつ表示させないと、すぐに全体が表示されてしまうからです。<br>長い間言葉を無駄にしましたが、皆さん (私と同じように) が理解できるかどうかはわかりませんが、以下は完了です。コードを .html ファイルとして保存し、自分で画像をダウンロードして試してみてください。パスを変更するのを忘れてください! <br>完全なコード: <br><br><br><br><br>コードをコピー</div> <br><br> コードは次のとおりです: <br><div class="codebody" id="code2204"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><title>背景画像移動</title> <br><style type="text/css"> <br>* <br>{ <br>マージン: 0; <br>パディング: 0; <br>} <br>body <br>{ <br>background: url("Images/body_bg.jpg") リピート中心 0 固定; <br>} <br>.cloud <br>{ <br>背景: url("Images/cloud1.png"); <br>高さ: 250px; <br>幅: 580ピクセル; <br>位置: 絶対。 <br>} <br>.hScroll <br>{ <br>オーバーフロー: 非表示; <br>} <br> <br>var クラウド = null; <br>var left = 0; <br>document.documentElement.className = "hScroll"; <br>function StartMove() { <br>cloud = document.getElementById("moveCloud"); <br>setInterval(移動, 100); <br>} <br>関数 Move() { <br>left = 1; <br>cloud.style.left = 左 "px"; <br>if (left >= (screen.width)) { <br>left = -580; <br>} <br>} <br>
