色コードはそもそも、単純な数値では無いので、いろいろテクニックを使っても無理がある為、素直に既存の jQuery の プラグインで色を変化させています。 右半分の縦の二つの正方形の中の色は変化していません 右半分に注目して実行して下さい。
実行コード
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/jquery.color.js"></script>
<style>
#back_left {
display:inline-block;
background-color:#949494;
width:200px;
height:400px;
}
#back_right{
display:inline-block;
background-color:#C7BEA8;
width:200px;
height:400px;
}
#left_blue {
position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
border:1px #000 solid;
background-color:#3041AB;
}
#left_black {
position:absolute;
top:200px;
left:100px;
width:100px;
height:100px;
border:1px #000 solid;
background-color:#262A40;
}
#right_blue {
position:absolute;
top:100px;
left:200px;
width:100px;
height:100px;
border:1px #000 solid;
background-color:#928CBB;
}
#right_black {
position:absolute;
top:200px;
left:200px;
width:100px;
height:100px;
border:1px #000 solid;
background-color:#8C7D63;
}
</style>
<div style='position:relative;height:400px;'>
<div id="back_left"></div><div id="back_right"></div>
<div id="left_blue"></div>
<div id="left_black"></div>
<div id="right_blue"></div>
<div id="right_black"></div>
</div>
</div>
<script>
function doAction() {
$("#back_right").animate({
"backgroundColor":"#55516C"
});
$("#left_blue").animate({
"backgroundColor":"#FFFFFF"
});
$("#left_black").animate({
"backgroundColor":"#F5E687"
});
}
function doAction2() {
$("#back_right").animate({
"backgroundColor":"#C7BEA8"
});
$("#left_blue").animate({
"backgroundColor":"#3041AB"
});
$("#left_black").animate({
"backgroundColor":"#262A40"
});
}
</script>
<input type="button" value="実行" onclick='doAction()'> <input type="button" value="戻す" onclick='doAction2()'>
関連するリンク jquery-color Twitter の元となった、色配置の投稿
|
|
【プラグイン:jQueryの最新記事】
- jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
- jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
- JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする
- かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン
- テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました
- jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
- jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方
- 使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
