この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

rick　No21です。
今回はjQueryでできる動きのあるサイトの作り方の一部をご紹介。

表示されている場所がおかしいかもしれませんが、表示されていますか？
ちなみにchromeでしか動作確認していません。
firefoxだとみれませんでしたw

---

では解説に入ります。

jQueryの読み込み

まずは、jQueryを読み込まないと始まりません。
< script type=”text/javascript” src=”http://search.kbmj.com/javascripts/jquery-1.4.2.min.js” >< /script >これによりjQueryを読み込みます。
自分で試すときは
http://jquery.com/
ここから落としてきてください。
本来は内に記述します。

表示場所

表示場所の指定
< div id=”box” title=”sample” > < /div>
< div id=”linkText” class=”lt” > < /div>

jQuery

< script language=”JavaScript” >< !–
URL = [1,2,3,4] //長いので省略
jQuery(function(){
　　for (var i=1; i <= URL.length; i++) {
　　　　jQuery(“#box”).append(‘< a href=”‘ + URL[(i – 1)] + ‘” >< div id=”box’+ i + ‘” class=”box” title=”sample’ + i + ‘” >< /div >’);
　　　　move(“box” + i, i);
　　};

　　jQuery(“.box”).css({
　　　　”width”:”40px”,
　　　　”height”:”40px”,
　　　　”position”:”absolute”,
　　　　 “top”:”400px”,
　　　　”background-color”:”#FFCC66″,
　　　　”cursor”:”pointer”
　　});

　　jQuery(“.lt”).css({
　　　　”width”:”270px”,
　　　　”position”:”absolute”,
　　　　”font”:”bold 10pt monospace”,
　　　　”top”:”350px”,
　　　　”letter-spacing”:”2px”,
　　　　”margin”:”0px”,
　　　　”padding”:”5px”,
　　　　”border-top”:”dotted 2px #FFCC66″,
　　　　”border-bottom”:”dotted 2px #FFCC66″,
　　　　”display”:”none”
　　});

　　function move(id, count){
　　　　jQuery(‘#’ + id).animate({“left”: (count * 100) + 200 + ‘px’});
　　};

　　jQuery(“.box”).hover(
　　　function(){
　　　　　jQuery(this).css({“background-color”:”#669933″});
　　　　　var tx = jQuery(this).attr(“title”)
　　　　　jQuery(“#linkText”).text(“->” + tx);
　　　　　jQuery(“#linkText”).show();
　　　},

　　　function(){
　　　　　jQuery(this).css({“background-color”:”#FFCC66″});
　　　　　jQuery(“#linkText”).text(“”);
　　　　　jQuery(“#linkText”).hide();
　　　}
　　);
});
//– >< /script >

#boxに対しての動作

for (var i=1; i <= URL.length; i++) {
　　　　jQuery(“#box”).append(‘< a href=”‘ + URL[(i – 1)] + ‘” >< div id=”box’+ i + ‘” class=”box” title=”sample’ + i + ‘” >< /div >’);
　　　　move(“box” + i, i);
　　};
内にURLの数だけ

タグを追加します。
　　function move(id, count){
　　　　jQuery(‘#’ + id).animate({“left”: (count * 100) + 200 + ‘px’});
　　};
タグ追加後moveに引数でid名と現在地(何ループ目？)を引数に渡してmoveの処理を行います。
moveの処理は、その名の通りboxを動かします。
animateによって動きのある動作をcssで指定できます。
どのboxをで第1引数のidをどれだけ移動させるかに第2引数のcountを使用しています。

boxと#linkTextに対しての動作

　　jQuery(“.box”).hover(
　　　function(){
　　　　　jQuery(this).css({“background-color”:”#669933″});
　　　　　var tx = jQuery(this).attr(“title”)
　　　　　jQuery(“#linkText”).text(“->” + tx);
　　　　　jQuery(“#linkText”).show();
　　　},
　　　
　　　function(){
　　　　　jQuery(this).css({“background-color”:”#FFCC66″});
　　　　　jQuery(“#linkText”).text(“”);
　　　　　jQuery(“#linkText”).hide();
　　　}
　　);
hoverは、各boxにマウスが重なったとき、外れたときの動作です。
まずhoverの第1引数に記述されているのが、マウスが重なったときの処理です。
cssで背景を変更、タグのtitleを取り出して#linkTextに記述して表示しています。
第2引数は、マウスが外れたときの動作です。
cssで背景を元に戻して#linkTextの内容を空にして非表示にしています。

CSS
CSSの記述内容は割愛させていただきますが、本来は外部参照の方が綺麗ですね。

jQueryを使用するとこのような動きのあるサイトが簡単に作成可能です。<>