js实现的页面矩阵图形变换特效

2019-11-20 10:41:44

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现的页面矩阵图形变换特效。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html><html>  <head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />    <title>matrix</title>    <style type="text/css">      body {        margin:0; padding:0;background:black;      }      .rect {        background:green;       }      .arc {        border-radius:5px; background:green; box-shadow:2px solid #fff;      }      ul {        list-style:none; margin:0; padding:0; position:absolute;      }      li {        width:20px; height:20px; position:absolute;       }      h1 {        text-align:center; line-height:150px; font-size:150px; color:green;      }    </style>  </head>  <body>    <h1>Chrome下兼容</h1>  </body>  <script type="text/javascript">    var body = document.getElementsByTagName("body")[0];    function getColor() {      var color = "rgb(";      color += (10+Math.round(Math.random()*245));      color += ",";      color += (10+Math.round(Math.random()*245));      color += ",";      color += (10+Math.round(Math.random()*245));      color += ")";      return color;    }    var matrixData = [      [1, 0, 0, 0, 1],      [0, 1, 0, 1, 0],      [0, 0, 1, 0, 0],      [0, 1, 0, 1, 0],      [1, 0, 0, 0, 1]    ];    var matrixData2 = [      [0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0],//1      [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],//2      [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],//3      [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],//4      [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],//5      [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],//6      [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],//7      [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0],//8       [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],//9       [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],//9       [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],//10       [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],//11       [0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],//12       [0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0] //13    ];    function createDom(attrs) {      var dom = document.createElement(attrs.tagName);      attrs.style ? dom.setAttribute("style", attrs.style) : void(0);      attrs.on ? dom.setAttribute("data-on", attrs.on) : void(0);      return dom;    }    var ulList = [];    var width = window.innerWidth;    var height = window.innerHeight;    var cols = Math.floor(width/120);    var rows = Math.floor(height/120);    var xOffset = Math.floor((width%120)/2);    function createFlyer(attrs) {      var iLength = matrixData.length,        jLength = matrixData[0].length,        radius = 20,        ul = null,        bgColor = getColor();      ul = createDom({tagName: "ul", style: "height:"+iLength*radius+"px; width:"+jLength*radius+"px; left:"+attrs.left+"px; top:"+attrs.top+"px"});       document.body.appendChild(ul);      for(var i=0; i<5; i++) {        var _data = matrixData[i];        for(var j=0; j<5; j++) {          var style = "width:"+radius+"px; height:"+radius+"px;left:"+j*radius+"px; top:"+i*radius+"px;background:"+(_data[j] == 0 ? "transparent": bgColor);          var li = createDom({tagName: "li", style: style, on: _data[j] ? 1 : 0});          ul.appendChild(li);        }      }      ulList.push(ul);    }    for(var i=0; i<cols; i++) {      for(var j=0; j<rows; j++) {        createFlyer({left: i*120+xOffset, top: 120*j});      }    }    function setULBgColor(dom, color) {      var lis = dom.getElementsByTagName("li");      for(var i=0,length=lis.length; i<length; i++) {        var _li = lis[i];        console.log(_li.getAttribute("data-on"));        _li.getAttribute("data-on") ? _li.style.backgroundColor = color : void(0);      }    }    function reset(fn) {      var lastIndex = ulList.length - 1;      for(var i=0,length=ulList.length; i<length; i++) {        var ul = ulList[i];        (function(i, ul) {          setTimeout(function() {            setULBgColor(ul, getColor());            if(i === lastIndex) {              fn ? fn() : void(0);            }          }, i*30);        })(i, ul);      }    };    function firstStep() {      var color = getColor();      var lastIndex = ulList.length - 1;      for(var i=0,length=ulList.length; i<length; i++) {        var ul = ulList[i];        (function(i, ul) {          setTimeout(function() {            setULBgColor(ul, color);            if(i == lastIndex) {              secondStep();            }          }, i*30);        })(i, ul);      }    }    function secondStep() {      reset(thirdStep);    }    function thirdStep() {      var angle = 0;      var addAngle = 15;      var interval = setInterval(function() {        angle += addAngle;        if(angle > 720) {          angle = 0;          clearInterval(interval);          createMatrix2();        }        for(var i=0,length=ulList.length; i<length; i++) {          var ul = ulList[i];          ul.style.webkitTransform = "rotate("+angle+"deg)";        }      }, 50);    }    function createMatrix2() {      body.innerHTML = "";      var iLength = matrixData2.length,        jLength = matrixData2[0].length,        radius = 20,        ul = null,        height = jLength*radius,        width = iLength*radius,        bgColor = getColor(),        left = (window.innerWidth - width)/2,        top = (window.innerHeight - height)/2      console.log(window.innerWidth);      console.log(width);      ul = createDom({tagName: "ul", style: "height:"+iLength*radius+"px; width:"+jLength*radius+"px; left:"+left+"px; top:"+top+"px"});       document.body.appendChild(ul);      for(var i=0; i<iLength; i++) {        var _data = matrixData2[i];        for(var j=0; j<jLength; j++) {          var style = "width:"+radius+"px; height:"+radius+"px;left:"+j*radius+"px; top:"+i*radius+"px;background:"+(_data[j] == 0 ? "transparent": getColor());          var li = createDom({tagName: "li", style: style, on: _data[j] ? 1 : 0});          li.className = "arc";          ul.appendChild(li);        }      }      ul.style.webkitTransform = "scale(0.1, 0.1)";      var scale = 0.1;      var interval = setInterval(function() {        ul.style.webkitTransform = "scale("+scale+", "+scale+")";        scale += 0.1;        if(scale > 1) {          clearInterval(interval);        }      }, 50);    }    firstStep();  </script></html>

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：基于canvas实现的钟摆效果完整实例

下一篇：JS实现简单的二维矩阵乘积运算