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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
js+css在交互上的应用
Jul 18 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
js+canvas实现画板功能
Sep 13 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+DBM的同学录程序(1)
2006/10/09 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
详解Python中的四种队列
2018/05/21 Python
Python实战之制作天气查询软件
2019/05/14 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
pytest中文文档之编写断言
2019/09/12 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
python中time.ctime()实例用法
2021/02/03 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
实习鉴定评语
2014/01/19 职场文书
森林防火工作方案
2014/02/14 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
PHP新手指南
2021/04/01 PHP
nginx部署多前端项目的几种方法
2021/05/25 Servers
logback如何自定义日志存储
2021/08/30 Java/Android
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏