calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< July 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

JavaScript・タイトルの大きさを変えながら移動=indexページ作りその1

0
      JavaScriptも23回にわたって勉強して来たので、ここらでぼちぼち実戦ぢゃ
    ボランティア団体「おたすけシルバー隊」のホームページを作り直しするタイミングなので、こいつをまな板に乗せちゃいますよー。(現在のホームページはこちら→)
     では、始まり始まり〜♪

     今回からは、絶対座標スタイルシートの制御レイヤ(重ね順)をマスターしながら、実際のホームページを作っていきます。
     はじめに、今回のテクニックを整理しておきます。

    絶対座標
    ・・・スタイルシート上で指定します。記述方法は、
       セレクタ { position: absolute; 配置場所; 数値; }
    absoluteの親要素にpositionが指定してある場合は、その親要素の左上がゼロ点になります。指定方法はabsoluteまたはrerativeで行います。

    JavaScriptで行うスタイルシートの制御
    ・・・JavaScript文書内で、
       document.all.オブジェクト(要素)のID名.style.属性
    とオブジェクトを指定して制御します。

    レイヤ(重ね順)
    ・・・スタイルシート上で指定します。記述方法は、
       #要素ID名 { z-index: 0; position等のその他の属性; }
    と、z-indexを指定することにより重ねて置くこと事ができます。z-indexは0からスタートし、数が小さいほど下になります。

     では実際にHTML文書を記述します。タイトル部分としては、背景、文字部、飾りの3つの画像を絶対座標で配置し重ねます。
          背景 silvertai6.jpg
    js68背景枝

         文字部 silvertai6moji.png
    js69タイトル
         飾り silvertaisun.png 
    js70太陽

     実際のHTML文書は下の通りです。3つの画像を入れるDIVにID名を付け、大きさを変えたい画像silvertai6moji.pngと画像silvertaisun.pngにもID名を付けています。また、head部では、で外部スタイルシートを、で外部JavaScriptファイルを指定しています。
    js64サンプル

     次にスタイルシートに移ります。
     スタイルシートでは、ID名を付けた各DIV毎に、絶対座標位置、重ね順を指示します。又、HTML文書内でこれら3つのDIVの親要素として「trial」と言う名のDIVを作りましたので、このDIVにはゼロ点相対座標(親の「container」DIVの)を指示しました。この結果、「trial」DIVの中で絶対座標が使える事になりました。
    js65サンプル

     最後に、JavaScriptを記述します。
     動きの基本は、スタイルシートを制御するdocument.all.オブジェクト(要素)のID名.style.属性で、文字部imgと飾り(太陽)imgの大きさ(width)を制御し、一方で文字部DIVの位置(pixelLeft)も制御します。この制御の間隔は30msごとに行い、これはsetIntervalを使います。この動きはclearIntervalで止めます。
     流れとしては、onload時に呼び出す関数picStartで、位置、大きさの初期設定の後、setIntervalで30ms毎に関数picMoveを働かせます。関数picMoveでは、文字部imgを3px大きくし、飾り(太陽)imgを1px小さくし、飾り(太陽)DIVの位置を3px右へ移動させます。文字部imgのwidthが477px以上になったらclearIntervalを使って動きを止めます。
    js66サンプル

    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
     今回は、絶対座標、JavaScriptによるスタイルシートの制御、レイヤを使ってホームページのタイトル部を作りました。
     次回は、リンクボタンを作ってみます。

    なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック