2011年06月21日

jQuery animation 〜動きのあるWebサイト作り〜

動きのあるWebサイトとは?


ここで言う動きのあるWebサイトとは、
オンマウス時に見た目が変わること。

環境


jquery-1.4.2.min.js



動きはここで(手抜きですいません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);
  };

< div id="box" title="sample">< /div>内にURLの数だけ< a>タグを追加します。

  function move(id, count){
    jQuery('#' + id).animate({"left": (count * 100) + 200 + 'px'});
  };

< a>タグ追加後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で背景を変更、< a>タグのtitleを取り出して#linkTextに記述して表示しています。
第2引数は、マウスが外れたときの動作です。
cssで背景を元に戻して#linkTextの内容を空にして非表示にしています。

CSS


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

jQueryを使用するとこのような動きのあるサイトが簡単に作成可能です。
posted by RicK at 10:53| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/46168378

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