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


Posted in Javascript onJanuary 26, 2016

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

运行效果截图如下:

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>

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

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
简单的Jquery全选功能
Nov 07 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 #Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 #Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 #Javascript
一篇文章掌握RequireJS常用知识
Jan 26 #Javascript
JS正则表达式比较常见用法
Jan 26 #Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 #Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 #Javascript
You might like
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
少女风vue组件库的制作全过程
2019/05/15 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python k-近邻算法实例分享
2014/06/11 Python
python获取标准北京时间的方法
2015/03/24 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
Sql面试题
2013/03/20 面试题
期末总结的个人自我评价
2013/11/02 职场文书
文明村创建实施方案
2014/03/27 职场文书
员工年度工作总结2015
2015/05/18 职场文书
七年级生物教学反思
2016/02/20 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers