文字や画像を動かす その2

①まず下を見てください。

幅500pxの領域を設定し、背景を空色にしました。下がソースです。
<div style="width:500px;height:100px;background-color:#b0c4de;"><marquee><img src="画像URL"width="100"></marquee></div>

②次に画像の移動領域を400pxに、領域をcenterにしました。

左右に50px分の余白ができましたね。余白をタグで指定することもできますが、ブラウザによっては動作しないので使いませんでした。
<div style="width:500px;height:100px;background-color:#b0c4de;"><center><marquee width="400"><img src="画像URL"></marquee></center></div>

③次に画像を上下に動かします。

<div style="width:100px;background-color:pink;"><marquee height="70" direction="up"><center><img src="画像URL"></center></marquee></div>
direction="up" を direction="down" に書き換えれば上から下への動きになります。

④最後に、左右方向や上下の属性を組み合わせたものを掲載しておきます。ちょっと面白い動きですね。
テーブルを使っています。

下がソースです。
<table width="400"><tr><td><marquee width="400" height="100" bgcolor="#b0c4de" direction="down" behavior="alternate"><marquee behavior="alternate"><img src="画像URL"></marquee></marquee></td></tr></table>

ソースの選択とコピー  下のボタンをクリックするとそれぞれのソースのコピーができます。
① 



② 



③ 



④ 




天気予報で日曜日の北部九州の最高気温は37度と発表されていた。午後3時、庭の日蔭、1.5mのところで測定してみた。40度!「うぅ~ん 暑い!
外出したついでにひと月ぶりに給油した。リッター143円だったのが149円になっていた。上がるのは気温ばかりではない。
スポンサーサイト

コメントの投稿

非公開コメント

移動する画像

こんにちは そちらは連日猛暑続きのようですがお元気の様で何よりです。
一雨あったとの事ですが涼を運んでくれましたでしょうか。

画像が移動するソース、早速メモ帳に保存させていただきました。
色々のシーンで活用できるのではないでしょうか。
GIFの動いている画像の移動にも良いし、文字や静止画でも工夫次第で
面白い作品の一助にもできるかと思います。折をみて使わせていただきます。
興味深いソースをありがとうございました。

松ぼっくりさん

こんばんは  ほとんど一日降ったり止んだりでした。窓を開けておきますと室内の湿度がかなり高くなっていましたので閉めると今度は蒸し暑くて……。明日も最大10mm程度降るようです。
ソースは自分でもすぐに利用できるように付け加えましたが、複数個書きますとやはりこの部分のIDを変えないといけませんのでやや手間取りました。
お暇な折にはお試しください。

早速試しました

こんばんわ~
いつもありがとうございます。

早速①を使わせていただき、ブログに貼り付けてみました。
そして画像をクリックすると音楽が流れるのも載せてみました。

どちらもうまく出来て喜んでます。
ありがとうございました。

今日は猛暑が嘘のように涼しい一日でした。

画像を動かすについて。

sakura先生~こんにちは。

今年は特に暑いので苦労します。
いつも参考になる情報をありがとうございます。
画像を動かすのは楽しそうですね。
近いうちに使わせて下さいね。
一番上のハクチョウが羽を動かすのはどうされているのでしょうか?
厚かましくて済みませんがよろしくお願いいたします。

magamikさん

うまく動作をしてよかったですね。画像によって速度を調整されるといいですよ。いろいろと楽しんでください。

sudachiさん

こんばんは 2日ほど雨が降ってしばし暑さを凌ぐことができました。
白鳥はアニメ画像です。以前ネットの素材サイトから探して保存しておいたものです。アニメ素材で検索するといろいろと出てくると思います。
ぜひお試しください。
プロフィール

ja6ei

Author:ja6ei
FC2ブログへようこそ!

カレンダー
03 | 2017/04 | 05
- - - - - - 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フィード