SQLの窓

2015年03月01日


jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。

色コードはそもそも、単純な数値では無いので、いろいろテクニックを使っても無理がある為、素直に既存の 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 の元となった、色配置の投稿





posted by lightbox at 2015-03-01 20:38 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり