jquery ile dikey-hareketli healt bar yapimi

 DEMO İNDİR



JavaScript

var backgroundPosX=0 /* su efekti x-position */

var yuzde=50; /* bar yuzdesi */
var hedefy=50; /* hedef yuzde; 
yukselme-alcalma efekti saglamak icin */


/* 
 her 17ms bir calistirilan fonksiyon
 60fps; 1000ms/60=16.666 ms
*/
function animation(){ 
	/* hedef yuzdeye dogru yukselme yada alcalma */
	if (hedefy < yuzde) yuzde-=1;
	if (hedefy > yuzde) yuzde+=1;
	
	/* bar yuzdesi ayarlaniyor */
	bar_set(yuzde);

	/* su efekti icin background kaydiriliyor */
	backgroundPosX+=1;
	$("#bar_full").css('background-position', backgroundPosX+'px 0px');
	
	/* animasyon 17ms sonra tekrar cagrilacak */
	setTimeout("animation()", 17);
}

/* bar in yuzdesini ayarlama. */
function bar_set(n){
	$('#bar_full').css('height', n+'%');
	$('#bar_empty').css('height', (100-n)+'%');
	$('#bar_text').html('%'+yuzde);
}

/* hedef yuzdeyi ayarlama */
function set(n){
	hedefy=n;
	
	/* [0-100] arasinda tutuluyor */
	if(hedefy<0)hedefy=0;
	else if(hedefy>100)hedefy=100;
}

/* increment */
function inc(n){set(hedefy+n);}

$(document).ready(function(){
	/* varsayilan yuzde degeri ataniyor */
	bar_set(yuzde);
	
	/* yuzdeyi gosteren textin pozisyonu ayarlaniyor */
	y=$('#bar').height()/2-$('#bar_text').height()/2
	$('#bar_text').css('margin-top', y);
	$('#bar_text').css('width', $('#bar').width());

	/* animasyon baslatiliyor */
	animation();
});

CSS

#bar{
	width:50px;
	height:200px;
	
	border:1px solid #2000a9;
	margin:3px;
}

#bar_text{
	font-family:Helvetica;
	position:absolute;
	text-align:center;
	
	color:white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
}

#bar_full{
	background:#de0000 url('b.png') repeat-x;
}

#bar_empty{
	background:#e9e3ff;
}

HTML