SQLの窓

2014年08月12日

jQuery の addClass で、CSS で作成するサイフの出来上がる過程を見れるようにしました



オリジナルはこちらです。

ですが、この手の CSS は結局どうなっているか読み解くのは結構面倒な作業です。なので、できるだけ簡単に jQuery で分割作業できないか作ってみましたが、結構汎用性ありそうです。
もともとクラスで分割して定義されている場合、複数クラス指定で無いならば、id として空の状態にしておいて、後からボタンでクラスを追加して行きます。

この時、クラス名を配列で定義しておいて、ボタン作成時にクラス名を value として保存しておけば、クリックされたらそれを取り出して addClass するだけです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

var class_set = ["wallet_outer","cash_behind","cash_behind_left","cash_behind_cover","cash_front","cash_front_left","cash_front_right","cash_front_cover","leftshade","leftshadecover","rightshade","rightshadecover","cover","cover2","cover3","buckle","buckleshade","buckleshadecover","buckledropshade","clip"];

$(function(){

	for( i=0; i<class_set.length; i++ ) { 
		$("#button"+(i+1))
			.attr("type", "button")
			.val(class_set[i])
			.click(function(){
				$(this).css(
					 {
						"background-color":"#404040",
						"color":"#FFFFFF",
					}				
				);
				$("#"+this.value).addClass(this.value);
			});
	}

});


for( i=0; i<class_set.length; i++ ) { 
	document.write("<input id=\"button"+(i+1)+"\"> \n" );
}


</script>

<!-- wallet -->
<div class="container">
    <div id="wallet_outer">
      <div id="leftshade"></div>
      <div id="leftshadecover"></div>
      <div id="rightshade"></div>
      <div id="rightshadecover"></div>
      <div id="cover"></div>
      <div id="cover2"></div>
      <div id="cover3"></div>
      <div id="cash_behind"></div>
      <div id="cash_behind_left"></div>
      <div id="cash_behind_cover"></div>
      <div id="cash_front"></div>
      <div id="cash_front_left"></div>
      <div id="cash_front_right"></div>
      <div id="cash_front_cover"></div>
      <div id="buckledropshade"></div>
      <div id="buckle">
        <div id="buckleshade"></div>
        <div id="buckleshadecover"></div>    
        <div id="clip"></div>
      </div>
    </div> 
</div>
<style>
.container {
  margin-top:55px;
}

.wallet_outer {
  width:375px;
  height:300px;
  border:8px solid #111;
  border-radius:30px;
  background:#74593D;
}

.cash_behind {
  border:8px solid #111;
  border-radius:40px 40px 0px 0px;
  background:#5D7D51;
  height:88px;
  width:240px;
  position:absolute;
  margin-top:-35px;
  margin-left:58px;
}

.cash_behind_left {
  border-radius:30px 0px 0px 0px;
  background:#739866;
  height:87px;
  width:40px;
  position:absolute;
  margin-top:-26px;
  margin-left:67px;
}

.cash_behind_cover {
  border-radius:30px 0px 0px 0px;
  background:#5D7D51;
  height:87px;
  width:40px;
  position:absolute;
  margin-top:-26px;
  margin-left:75px;
}


.cash_front {
  border:8px solid #111;
  border-radius:40px 40px 0px 0px;
  background:#739866;
  height:61px;
  width:240px;
  position:absolute;
  margin-top:-8px;
  margin-left:90px;
}

.cash_front_left {
  background:#91B185;
  height:61px;
  width:30px;
  position:absolute;
  margin-left:98px;
  border-radius:35px 0px 0px 0px;
}

.cash_front_right {
  background:#5D7D51;
  height:61px;
  width:30px;
  position:absolute;
  margin-left:307px;
  border-radius:0px 35px 0px 0px;
}

.cash_front_cover {
  border-radius:30px 30px 0px 0px;
  background:#739866;
  height:61px;
  width:222px;
  position:absolute;
  margin-left:107px;
}

.leftshade {
  position:absolute;
  height:300px;
  width:30px;
  background:#806346;
  border-radius:26px 0px 0px 26px;
}

.leftshadecover {
  position:absolute;
  margin-left:13px;
  height:300px;
  width:30px;
  background:#74593D;
  border-radius:26px 0px 0px 26px;
}

.rightshade {
  position:absolute;
  height:300px;
  width:44px;
  margin-left:331px;
  background:#695037;
  border-radius:0px 26px 26px 0px;
}

.rightshadecover {
  position:absolute;
  height:240px;
  width:32px;
  margin-left:331px;
  margin-top:60px;
  background:#74593D;
  border-radius:0px 26px 26px 0px;
}

.cover {
  position:absolute;
  margin-top:-7px;
  margin-left:20px;
  height:60px;
  width:30px;
  background:#695037;
  z-index:3;
  border-radius:40px 0px 0px 40px;
  border:8px solid #111;
}

.cover2 {
  position:absolute;
  margin-top:61px;
  margin-left:307px;
  height:60px;
  width:60px;
  background:#74593D;
  z-index:1;
  border-radius:0px 40px 0px 0px;
  border:8px solid #111;
}

.cover3 {
  position:absolute;
  margin-top:69px;
  margin-left:300px;
  height:31px;
  width:30px;
  background:#74593D;
  z-index:4;
}

.buckle {
  margin-top:100px;
  margin-left:220px;
  width:180px;
  height:100px;
  background:#957657;
  border:8px solid #111;
  border-radius:35px 10px 35px 35px;
  position:absolute;
  z-index:3;
}

.buckleshade {
  background:#AE8F71;
  height:100px;
  width:25px;
  position:absolute;
  margin-left:0px;
  border-radius:40px 0px 0px 40px;
    z-index:1;
}

.buckleshadecover {
  background:#957657;
  height:100px;
  width:35px;
  position:absolute;
  margin-left:10px;
  border-radius:20px 0px 0px 20px;
  z-index:1;
}

.buckledropshade {
  background:#695037;
  height:30px;
  width:140px;
  position:absolute;
  margin-left:225px;
  margin-top:195px;
  border-radius:0px 0px 0px 30px;
  z-index:0;
}

.clip {
  z-index:2;
  border:8px solid #111;
  border-radius:55px;
  position:absolute;
  width:55px;
  height:55px;
  margin-left:20px;
  margin-top:14px;
  background: rgba(255,187,0,1);
background: -moz-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,187,0,1)), color-stop(49%, rgba(255,187,0,1)), color-stop(54%, rgba(240,176,0,1)), color-stop(100%, rgba(240,176,0,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
background: linear-gradient(135deg, rgba(255,187,0,1) 0%, rgba(255,187,0,1) 49%, rgba(240,176,0,1) 54%, rgba(240,176,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb00', endColorstr='#f0b000', GradientType=1 );
}
</style>



タグ:jquery CSS
【jQueryの最新記事】
posted by at 2014-08-12 19:01 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX