Color change using percentage
//Script following below
<style>
#colorContainer{
width:100%;
height:auto;
}
.colors{
float:left;
width:50px;
height:50px;
position:relative;
font-size:20px;
text-align:center;
line-height:50px;
}
</style>
<script type="text/javascript">
var percent = 0;
var intervalId;
function init(){
intervalId = setInterval(doAnim, 100);
}
function doAnim(){
$("#colorContainer").append("<div class=colors style=background:"+getRedToGreen((percent+=2), 0)+";color:"+getRedToGreen((percent), 255)+">
"+percent+"%</div>
");
if(percent>=100){
clearInterval(intervalId);
}
}
function getRedToGreen(percent,val){
r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
b = "0";
if(!val){
return 'rgb('+r+','+g+','+b+')';
}else{
return 'rgb('+(val-r)+','+(val-g)+','+b+')';
}
}
</script>
</head>
<body onload="init();">
<div id="colorContainer">
</div>
</body>
No comments:
Post a Comment