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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jQuery功能函数详解
Feb 01 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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使用flock实现文件加锁的方法
2015/07/01 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
详解javascript遍历方式
2015/11/11 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
详解javascript void(0)
2020/07/13 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
如何通过Python实现标签云算法
2019/07/02 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python不同系统中打开方法
2020/06/23 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
赔偿协议书范本
2014/04/15 职场文书
求职自我评价怎么写
2015/03/09 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
小学校本教研总结
2015/08/13 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Java实现二分搜索树的示例代码
2022/03/17 Java/Android