Color Changing JavaScript Copy The Below JavaScript code in Notepad and save the file with .html extension. And You are Done. Open The file with browser and see the magic.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animated Transparent PNG Bubbles in JavaScript</title>
<style type="text/css">
html, body {
background: #000;
color: #FFF;
height: 100%;
}
body {
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
height: 100%;
width: 100%;
}
p, address {
background: rgba(0, 0, 0, 0.25);
font-family: Georgia;
font-style: normal;
margin: 0;
padding: 5px;
position: absolute;
}
p {
left: 5px;
max-width: 50%;
top: 5px;
}
address {
bottom: 5px;
right: 5px;
text-align: right;
}
td {
/* border: 1px solid #000; */
min-height: 0;
}
td img {
border: 0;
display:block;
height: 100%;
width: 100%;
image-rendering: optimizeSpeed; /* Firefox 3.6 */
-ms-interpolation-mode: nearest-neighbor; /* IE 7+ */
}
a{color:#FFF;}
a:hover{color:#06F;}
</style>
</head>
<body>
<script type="text/javascript">
var gridWidth = 3, gridHeight = 2;
var cellCount = gridWidth * gridHeight;
var w = Math.ceil(100 / gridWidth);
var h = Math.ceil(100 / gridHeight);
document.write('<table border="0" cellpadding="0" cellspacing="0">');
for (var r = 0; r < gridHeight; r++)
{
document.write("<tr>");
for (var c = 0; c < gridWidth; c++)
{
document.write('<td style="width:' + w + '%;height:' + h + '%"><img src="disco-floor.png"></td>');
}
document.write("</tr>");
}
document.write("</table>");
var elements = document.getElementsByTagName("TD");
var cells = new Array(elements.length);
// Copy the element collection into an array because it is faster
for (var i = 0; i < cells.length; i++)
{
cells[i] = elements[i];
}
function colorFromHue(hue)
{
var ramp = [255, 255 - Math.round(hue % 1 * 255), 0, 0, Math.round(hue % 1 * 255), 255];
var i = Math.floor(hue % 6);
return "rgb(" +
ramp[ i ] + "," +
ramp[(i + 4) % 6] + "," +
ramp[(i + 2) % 6] + ")";
}
var discoFloorHue = 0;
function animate()
{
for (var i = cellCount; i--; )
{
//var i = Math.floor(Math.random() * cellCount);
cells[i].style.backgroundColor = colorFromHue(discoFloorHue + Math.random() * 2);
}
discoFloorHue = (discoFloorHue + 0.5) % 6;
window.setTimeout(animate, 1000 / 2);
}
animate();
</script>
<p>The idea was to create a nice full screen animation with very low CPU usage.
Firefox calculates the cell height a bit different.
<a href="#" onclick="this.parentNode.style.display='none';return false">Hide this text</a>.</p>
</body>
</html>
Links are the fuel of your blog! To get a successful blog,
ReplyDeletethere are two things that you just can't skip: creating
original and valuable content, getting people to visit and
link your website. The more people link to your blog, the
more search engine will consider that your blog has value:
links are votes of confidence.
hi sir i am one of u r old student i am interested to learn wordpress,mvc and zend how to learn is there any coaching centers please let me know or online websites,books,softcopy. Thank u
ReplyDeleteUnfortunately your unconscious is unable to give you any precise details. This is why Phani, as I have often repeated to you over the last few months, only a full astrological reading can bring you all of the details you need. Even today without working on such a reading I couldn't give fun with javascript,, you the details that it could furnish like the important dates, what you should do and the events you should not miss out on. Full astrological calculation is needed for this. I have already given you the link to my web page where you can request this reading but here it is again: javascript funny tricks
ReplyDelete