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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 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
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
php array_walk() 数组函数
2011/07/12 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python中定义结构体的方法
2013/03/04 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
车间班组长岗位职责
2013/11/13 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
就业协议书怎么填
2014/04/11 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
见习报告格式范文
2014/11/08 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python