この記事はアピリッツの技術ブログ「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を使用するとこのような動きのあるサイトが簡単に作成可能です。<>
