»
EnglishFrenchVietnamese

Print - Colorful Flashing Popsquares - JavaScriptBank.com

Full version: jsB@nk » Background » Background effect » Colorful Flashing Popsquares
URL: http://www.javascriptbank.com/colorful-flashing-popsquares.html

Colorful Flashing Popsquares © JavaScriptBank.comA small JavaScript code to run the cool awesome JavaScript stage show on your website. This JavaScript converts a simple HTML table into the colorful flashing cells. You may change to many different colors immediately by one click link or wait this JavaScript effect shows.Very nice and stunning to present some hot products on your welcome pages with JavaScript. Let's try some other awesome JavaScript effects: - JavaScript Flashing squares - JavaScript Colorful Object onMouseover

Full version: jsB@nk » Background » Background effect » Colorful Flashing Popsquares
URL: http://www.javascriptbank.com/colorful-flashing-popsquares.html



JavaScript
<script type="text/javascript"> // Copyright 2007 Christopher Thomas // Feel free to do what you want with this, so long as you either // preserve this notice, or a link back to this page.var d;var nodes = [];var hue = 0;var doHue = true;var table;function go() {d = document.getElementById('thediv');table = d.parentNode;for (var y=0; y<5; y++){var d2 = document.createElement("tr");for (var x=0; x<5; x++){var n = document.createElement("td");n.setAttribute("width", "20%");d2.appendChild(n);nodes.push(n);n.setAttribute("num", parseInt(Math.random()*255));}d.appendChild(d2);}setInterval(update, 50);}function update() {  if (doHue)    hue += 0.01;  // create the actual color  var redHue   = (Math.sin(hue)+1)/2;  var greenHue = (Math.sin(hue + Math.PI / 3)+1)/2;  var blueHue  = (Math.sin(hue + Math.PI * 2 / 3)+1)/2;  redHue = redHue * redHue;  greenHue = greenHue * greenHue;  blueHue = blueHue * blueHue;  // ensure a strong color  var len = Math.sqrt(redHue*redHue + greenHue*greenHue + blueHue*blueHue);  redHue /= len;  greenHue /= len;  blueHue /= len;  table.style.backgroundColor = "rgb("+parseInt(redHue*170)+","+    parseInt(greenHue*170)+","+parseInt(blueHue*170)+")";  for (var ntemp in nodes) {    var n = nodes[ntemp]; // stupid MSIE doesn't do for each    var c = parseInt(n.getAttribute("num"));    c += (Math.random() * 2 - 1)*8;    c = Math.min(255, Math.max(90, parseInt(c)));    n.setAttribute("num", c);    var r = parseInt(c*redHue);    var g = parseInt(c*greenHue);    var b = parseInt(c*blueHue);    n.style.backgroundColor = "rgb("+r+","+g+","+b+")";  }}window.onload = go;</script>


HTML
<table width="100%" height="100%" cellspacing="1" style="background-color: #0000AA;margin:0px;padding:0px;"><tbody id="thediv"></tbody></table>    <a href="#" onclick="doHue = !doHue;">Toggle color-cycling</a>