FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryでDOM要素を作成・追加してanimate

昨日の続き。

HTMLには
<div class="main"></div>
だけ記述して、クリックして動かすボックスをjQueryで作成することにした。

<2010/8/6 追記>
このページはソースコードを紹介しているだけです。
jQueryでDOM要素を作成し、DOMツリーを構築する方法については、こちらの記事で詳細をまとめました。
<追記ここまで>

cssは以下のとおり。
/* 背景 */
.main {
  display: block;
  width: 500px;
  height: 300px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
/* 動かすボックス */
.box {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0px;
}

ボックス作成部分のソースコードは以下のようになった。
var boxcolor = new Array("#66FFFF","#66CCFF","#6699FF");  // 動かすboxの色

$(document).ready(function() {
  // 動かすboxを構築
  var $div = $("div.main:first");  // 親ノード
  var $box;  // boxノード
  for(var i = 0; i < boxcolor.length; i++){
    $box = $("<div/>").addClass("box");
    $box.css("background-color",boxcolor[i]);
    $box.css("top",String(100 * i) + "px");
    $div.append($box);
  }
  $("div.box").click(movebox);
});

ボックスをクリックしたときの動作部分は以下のとおり。
右側に動いたのをクリックすると左側に戻る処理をどうやって実装しようかと考えたが、安易にフラグを使用した。
/* 定数 */
var aconst = {
  moveAttr: "moved",    // 要素にセットする属性名
  moveAfter: "400px",    // move後の offset left
  moveBefore: "0px",    // move前の offset left

  pdur: "normal",    // animateのduration 数値で指定する場合はミリ秒
  peasing: "swing"  // animateのeasing
}

var movebox = function(){
  var movedflg = $(this).attr(aconst.moveAttr);  // move後 "true" move前 "false"
  var leftval;  // animate後のleftの値
  if(movedflg == "true"){
    // move後
    leftval = aconst.moveBefore;
    movedflg = "false";
  }else{
    // move前
    leftval = aconst.moveAfter;
    movedflg = "true";
  }
  $(this).animate({left: leftval}, aconst.pdur, aconst.peasing,
    function(){$(this).attr(aconst.moveAttr,movedflg);} );
}

true/false のフラグを該当ボックスの属性にセットするのだが、セットするとbooleanではなくstringになるので怪しいソースになってしまった。フラグの値を"right","left"にした方がよかったか。

今日は大してハマらずにサクサクできた。jQueryのプラグインを1つ読んだことがかなり効いてる。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。