オリジナルはこちらです。 ですが、この手の 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の最新記事】
- clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける
- 一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする
- jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する
- jQuery で DIV の中の DIV を縦横中央に配置する
- jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する
- クリックした入力フィールド以外をブラックアウトする jQuery プラグイン
- FORM の内容を localStorage に保存する jQuery プラグイン
- tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン
- 滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll
- jQuery : F1 キーでヘルプを起動させないようにする
- jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する
- jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )
- jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う
- jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)
- jQuery プラグイン jquery.balloon.js の外部からのコントロール
- NAVER : Image*After の城と教会編
- 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。
- jQuery で書かれた、幻想的な動く星座のようなシーン
- jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )
- CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。
