萌え萌えcss

http://rtilabs.net/files/2010_12_24/moemoe_css/

jquery 1.4.3 から搭載された cssHooks を利用して遊んでみました。
cssHooksを利用すると、新しい css のカスタムプロパティを作成できます。

いままで jquery で width 属性などのように、実在しない cssのプロパティを拡張したければ、動的に jqueryのメソッド書き換えるモンキーパッチを行うしかありませんでした。
クロスブラウザの回転は、 まさに jquery のメソッドを動的に置き換えで実装しています。

ところが、 jquery 1.4.3 から、 cssHooks という機能が実装され、 jqueryを経由して安全に css のカスタムプロパティを作成できるようになりました。
このことを教えてもらったので、 cssHooks を利用して まったく新しいカスタムプロパティを作成してみました。

プレゼンの中で利用した cssHooks 部分のソースコードは以下のとおりです。
短いソースで面白い効果を実装できます。

//萌えプロパティを実装する
$.cssHooks['萌え'] = {
	get: function( elem, computed, extra ) {
		var value = $(elem).data('萌え');
		return value ? value : 0
	},
	set: function( elem, value ) {
		elem = $(elem);
		var max_moe = 0;
		var filename = '';
		if      ( elem.hasClass('poirot') ){max_moe = 9;	filename = 'e'; }	//エリーさん
		else if ( elem.hasClass('homes') ){ max_moe = 1;	filename = 's'; }	//シャロ
		else if ( elem.hasClass('wolfe') ){ max_moe = 1;	filename = 'n'; }	//ネロ
		else if ( elem.hasClass('gray') ){  max_moe = 1;	filename = 'c'; }	//コーデリアさん
		else return ; //不明.

		value = parseInt(value);
		if (value > max_moe)
		{	//萌え限界突破
			if (value >= max_moe + 2)
			{	//限界+2
				elem.data('萌え',max_moe + 2);
				elem.attr('src' , 'imgs/agupsu_1.png');	//アグPス
			}
			else 
			{	//限界+1
				elem.data('萌え',max_moe + 1);
				elem.attr('src' , 'imgs/ishipra_2.jpg');	//いしPら
			}
		}
		else
		{
			elem.data('萌え',value);
			elem.attr('src' , 'imgs/' + filename + '_' + value + '.jpg');
		}
	}
};

//中の人プロパティを実装する
$.cssHooks['中の人'] = {
	get: function( elem, computed, extra ) {
		var value = $(elem).data('中の人');
		return value ? value : 0
	},
	set: function( elem, value ) {
		elem = $(elem);
		value = parseInt(value);

		if (value > 1)
		{
			value = 1;
		}
		elem.data('中の人',value);
		elem.attr('src' , 'imgs/all_' + value + '.jpg');	//決め打ち!!
	}
};

//回転プロパティを実装する
$.cssHooks['rotate'] = {
	get: function( elem, computed, extra ) {
		var value = $(elem).data('rotate');
		return value ? value : 0
	},
	set: function( elem, value ) {
		var style = elem.style;

		var transformMethod = typeof style.MozTransform != 'undefined' ? 'MozTransform' 
					: (typeof style.MsTransform != 'undefined' ? 'MsTransform' 
					: (typeof style.WebkitTransform != 'undefined' ? 'WebkitTransform' 
					: (typeof style.OTransform != 'undefined' ? 'OTransform' 
					: (typeof style.Transform != 'undefined' ? 'Transform' 
					: false ))));

		if (!transformMethod)
		{
			return ;	//未サポート.
						//IE はフィルターでやると回るけど、とりあえず未サポートで。
		}

		elem = $(elem);
		value = parseInt(value) % 360;

		elem.css(transformMethod, 
			(elem.css(transformMethod) || '').replace(/none|rotate\(.*?\)/, '') + 'rotate(' + value + 'deg)');
		elem.data('rotate' , value);	//めんどいので、、

		return this;
	}
};

//今だと、 csshooks の値を animate で読んでくれないみたいなので、
//特別に設定してあげるんだからね。
jQuery.fx.step.萌え  = function(fx) {	//UTF-8だと動くよ!!みなくる
	if ( fx.state == 0 ) {
		fx.start = $(fx.elem).css('萌え');
//		fx.end =   fx.end;
		fx.now = fx.start;
	}
	$(fx.elem).css('萌え',fx.now);
};

このように定義すると、jqueryを経由して、ふつーの css のプロパティのように、扱うことができます。

var moe = $('#object').css('萌え');
$('#object').css('萌え' , 1);

面白いですねー。
(何かの advent calendar で書けばよかったかなぁ。。。 )

ミルキーホームズも次回で最終回か、寂しくなるな。