テンプレートとアクセスアップのでめらら楽天日記

marquee（マーキー）講座(09)

ＨＯＭＥ >> マーキー >>marquee（マーキー）講座(09)
複数同時に動かす
スタイルの position や z-index を使いますとマーキーを重ねて表示することができます。 違った動きのマーキーを組み合わせることで楽しい画面ができますね。
<div style="width:500px; height:350px; border:#000000; position:relative"><div style="width:300px; height:300px; position:absolute; top:0px; left:0px; z-index: 1;"><MARQUEE DIRECTION="up" BEHAVIOR="alternate" SCROLLAMOUNT="3" width="300px"><MARQUEE BEHAVIOR="alternate" WIDTH="300px" SCROLLAMOUNT="2"> 【動き1】 </marquee></marquee></div><div style="width:300px; height:300px; position:absolute; top:0px; left:0px; z-index: 2;"><MARQUEE DIRECTION="down" BEHAVIOR="alternate" SCROLLAMOUNT="3" width="300px"><MARQUEE BEHAVIOR="alternate" WIDTH="300px" SCROLLAMOUNT="1"> 【動き2】 </marquee></marquee></div><div style="width:300px; height:300px; position:absolute; top:0px; left:0px; z-index: 3;"><MARQUEE DIRECTION="down" BEHAVIOR="alternate" SCROLLAMOUNT="3" width="300px"><MARQUEE BEHAVIOR="alternate" WIDTH="300px" SCROLLAMOUNT="5"> 【動き3】 </marquee></marquee></div></div>
【動き1】
【動き2】
【動き3】
文字を画像に変えて、背景画像を並べてみると･･･
<div style="background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/64.gif); background-repeat: repeat;"><div style="width:500px; height:350px; border:#000000; position:relative"><div style="width:300px; height:300px; position:absolute; top:0px; left:0px; z-index: 1;"><MARQUEE DIRECTION="up" BEHAVIOR="alternate" SCROLLAMOUNT="3" width="300px"><MARQUEE BEHAVIOR="alternate" WIDTH="300px" SCROLLAMOUNT="2"> <IMG SRC="http://plaza.rakuten.co.jp/img/user/99/06/4429906/61.gif" width="48" height="32" alt="羽根1"> </marquee></marquee></div><div style="width:300px; height:300px; position:absolute; top:40px; left:70px; z-index: 2;"><MARQUEE DIRECTION="down" BEHAVIOR="alternate" SCROLLAMOUNT="3" width="300px"><MARQUEE BEHAVIOR="alternate" WIDTH="300px" SCROLLAMOUNT="1"> <IMG SRC="http://plaza.rakuten.co.jp/img/user/99/06/4429906/62.gif" width="48" height="32" alt="羽根2"> </marquee></marquee></div><div style="width:300px; height:300px; position:absolute; top:70px; left:140px; z-index: 3;"><MARQUEE DIRECTION="down" BEHAVIOR="alternate" SCROLLAMOUNT="3" width="300px"><MARQUEE BEHAVIOR="alternate" WIDTH="300px" SCROLLAMOUNT="5"> <IMG SRC="http://plaza.rakuten.co.jp/img/user/99/06/4429906/63.gif" width="48" height="32" alt="羽根2"> </marquee></marquee></div></div></div>
羽根1
羽根2
羽根2
画像素材： Cafe Part2
--ＭＥＮＵ--
--マーキーMENU--
【ＰＲ】

© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: