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
Mộ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 và đổ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
<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><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>