这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现的页面矩阵图形变换特效, 涉及 JavaScript 利用数组与字符串的数学运算操作页面节点样式变换的相关技巧, 需要的朋友可以参考下
本文实例讲述了 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 程序设计有所帮助。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0701/267386.html