js实现的页面矩阵图形变换特效
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了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:"+iLengthradius+"px; width:"+jLengthradius+"px; left:"+attrs.left+"px; :"+attrs.+"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:"+jradius+"px; :"+iradius+"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: i120+xOffset, : 120j});
}
}
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);
}
}, i30);
})(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();
}
}, i30);
})(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 = jLengthradius,
width = iLengthradius,
bgColor = getColor(),
left = (window.innerWidth - width)/2,
= (window.innerHeight - height)/2
console.log(window.innerWidth);
console.log(width);
ul = createDom({tagName: "ul", style: "height:"+iLengthradius+"px; width:"+jLengthradius+"px; left:"+left+"px; :"++"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:"+jradius+"px; :"+iradius+"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>
更多关于js特效相关内容感兴趣的读者可查看本站专题《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
上一篇：基于canvas实现的钟摆效果完整实例
下一篇：JS实现简单的二维矩阵乘积运算
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程