»
Tiếng AnhTiếng PhápTiếng Việt

In - Ô vuông chớp màu nghệ thuật - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Màu nền » Hiệu ứng nền » Ô vuông chớp màu nghệ thuật
URL: https://www.javascriptbank.com/colorful-flashing-popsquares.html

Ô vuông chớp màu nghệ thuật © JavaScriptBank.comMột đoạn mã JavaScript nhỏ nhưng rất giỏi võ, để tạo một hiệu ứng JavaScript cực kì bắt mắt trên trang web của bạn. Nó sẽ biến đổi một bảng HTML đơn giản thành các ô vuông chớp sángđổi màu liên tục. Bạn có thể dễ dàng thay đổi sang dải màu sắc khác với một cú nhấn chuột hoặc cứ đợi hiệu ứng JavaScript này trình diễn.Một hiệu ứng JavaScript rất đẹp để giới thiệu các sản phẩm nổi bật trên các trang chào đón của bạn. Hãy thử các hiệu ứng tương tự khác: - JavaScript các ô màu chớp sáng - JavaScript Colorful Object onMouseover

Phiên bản đầy đủ: jsB@nk » Màu nền » Hiệu ứng nền » Ô vuông chớp màu nghệ thuật
URL: https://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>