負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit
X座標とY座標

document.オブジェクト名.style.left = X座標 … 画像のX座標を指定
document.オブジェクト名.style.top = Y座標 … 画像のY座標を指定


オブジェクト名

オブジェクト名 … オブジェクト名を指定すると、オブジェクトの色やサイズなどの状態を変更できます。

name属性でオブジェクト名を指定
document.namezokusei.style.top = X座標

参照番号(ページ先頭からの画像数)でオブジェクト名を指定
document.images[0].style.top = X座標

画像名でオブジェクト名を指定
document.images["namezokusei"].style.top = X座標


ソース

<script type="text/javascript"><!--x = 0;v = 3;function kansu() {        x += v;        // x = x + v; xにvをどんどん足していく        if(x>400 || x<0){        // もしx座標が400を超えたら。又はx座標が0未満になったら。                        v = -v;                // 右までいったら左に反転、左までいったら右に反転させる                }document.enen.style.left = x;// オブジェクト名enenのX座標を指定}setInterval('kansu()',20);// 0.02秒毎にkansu()を実行// --></script><img src="main3.jpg" name="enen" style="position:relative; left:0; top:0;">// 画像(main3.jpg)を表示
式1 || 式2 … もし式1だったら。または式2だったら処理を実行。
v = -v … 右までいったら左に反転、左までいったら右に反転。

document.オブジェクト名.style.left … オブジェクト名のX座標を指定。
setInterval() … 一定毎に処理を実行。

name … オブジェクト名を指定

position:relative … 画像の位置(相対指定)
potision:absolute … 画像を位置(絶対指定)
left:0 … X座標を0に指定
top:0 … Y座標を0に指定



サンプル

ボタンをクリックで画像が左右に移動します。





追記:ブログにアップしたら動かなくなっちゃいました。なんでだろ・・。
関連記事












管理者にだけ表示

トラックバックURL↓
http://taro4.blog37.fc2.com/tb.php/16-450097cf

| ホーム |

カレンダー

05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。