« こいのぼり2 | メイン | win8+eosutility Windows8でAdhocが標準ではなくなったので... »

2013年5月10日

あんまり使わないけど、CSSで画像を分割して効果をかける >>ソフトウェア 


Jqueryで効果つくれる？みたいなことをいわれてなんとなくむかついたので作成。
HTMLソースは http://debz-di.kabocha.to/archives/2013/20130510_02/test.html にあるのでよろしかったらどうぞ。 だいぶてきとうだけど。 
$(document).ready(function()
{

img = "SDIM3163_2s.jpg";
bw = 800;
bh = 533;

var max = 4;

var w1 =  bw / max;
var h1 =  bh / max;
var h1 =  533;

var speed_ck = 600;	//click時

for (i = 1; i <= max; i++)
{

	$("#imgboard").append('<div class="p' + i + '"></div>');
	$("#imgboard .p" + i).css('width', w1 + "px");
	$("#imgboard .p" + i).css('height', "800px");
	$("#imgboard .p" + i).css('float', "left");
	var PointW = "0px";
	var PointH = "0px;"

	if (i == 1)
	{
		$("#imgboard .p" + i).css('background', "url(" + img +")" + " no-repeat " + PointW + " " + PointH);


	}
	else
	{
		PointW = w1 * i - w1;
//		PointH = h1 * i;
		PointH = h1;

 		$("#imgboard .p" + i).css('background', "url(" + img +")" + " no-repeat -" + PointW + "px" + " 0px");
	}


}

	setTimeout(function(){ ImgFadeOut(); } , 5000 );

	function ImgFadeOut()
	{
		var sp1 = 1400;
		var sp2 = 1000;
		for (i = 1; i <= max; i++)
		{
			if (i % 2 == 0)
			{
				$("#imgboard .p" + i ).fadeTo(sp2,0);
			}
			else
			{
				$("#imgboard .p" + i ).fadeTo(sp1,0);
			}
		}
		
		setTimeout(function(){ ImgFadeIn(); } , 5000);
	}

	function ImgFadeIn()
	{
		var sp1 = 1400;
		var sp2 = 1000;
		for (i = 1; i <= max; i++)
		{
			if (i % 2 == 0)
			{
				$("#imgboard .p" + i ).fadeTo(sp1,1);
			}
			else
			{
				$("#imgboard .p" + i ).fadeTo(sp2,1);
			}
		}
		setTimeout(function(){ ImgFadeOut(); } , 4000);

	}
});
twitterこの記事をTwitterでみんなに教える。

投稿者 debizoh : 2013年5月10日 19:11



トラックバック

現在、この記事はトラックバックを受け付けておりません。


コメント

現在、この記事はコメントを受け付けておりません。