JavaScriptの効果

技術情報

JavaScriptの効果を具体的にご紹介したいと思います。

このような記述、
<img src=”http://tec-aid.com/wp-content/themes/ta-theme001_200/images/etc/myprofile.png”/>
は次のような画像を表示させます。

講師プロフィール

ただ画像を表示しているだけです。そこでこの画像に動きをつけたいと思います。先ず、動きをつけたい画像である目印をつけます。
<img id=”koko” src=”http://tec-aid.com/wp-content/themes/ta-theme001_200/images/etc/myprofile.png”/>
id=”koko”は目印だと思ってください。
(idの他にclassもありますがここでは説明を割愛します)

そしてJavaScriptに登場してもらいます。JavaScriptは<script>動きなどを示すプログラム</script>で記述します。JQueryと呼ばれる記述を簡潔にするライブラリを使用して次の様に書いてみます。

<script>$(“#koko”).fadeTo(4000,0.1); $(“#koko”).fadeTo(4000,1.0);</script>

$(“#koko”)はid(#で表す)がkokoのタグを指定しています。次に.fadeTo(4000,0.1)は4000ミリ秒(4秒)かけて透明度を0.1まで上げなさいという指示です。.fadeTo(4000,1.0)は4秒かけて透明度を1.0(無透明)にしなさいという命令です。この二つを繰り返すことでブリンキングが実現できます。結果が下の表示です。

講師プロフィール

いかがですか?JavaScriptのイメージがつかめたでしょうか。これはJavaScriptの分かりやすい例で、もっと高度なことをさせることができます。次の機会にご紹介したいと思います。

«
»
  • LINEで送る

音声ミュートを解除すると軽快な音楽が流れます (^^♪