js实现的页面矩阵图形变换特效
本文实例讲述了js实现的页面矩阵图形变换特效。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>matrix</title>
<styletype="text/css">
body{
margin:0;padding:0;background:black;
}
.rect{
background:green;
}
.arc{
border-radius:5px;background:green;box-shadow:2pxsolid#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>
<scripttype="text/javascript">
varbody=document.getElementsByTagName("body")[0];
functiongetColor(){
varcolor="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+=")";
returncolor;
}
varmatrixData=[
[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]
];
varmatrixData2=[
[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
];
functioncreateDom(attrs){
vardom=document.createElement(attrs.tagName);
attrs.style?dom.setAttribute("style",attrs.style):void(0);
attrs.on?dom.setAttribute("data-on",attrs.on):void(0);
returndom;
}
varulList=[];
varwidth=window.innerWidth;
varheight=window.innerHeight;
varcols=Math.floor(width/120);
varrows=Math.floor(height/120);
varxOffset=Math.floor((width%120)/2);
functioncreateFlyer(attrs){
variLength=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(vari=0;i<5;i++){
var_data=matrixData[i];
for(varj=0;j<5;j++){
varstyle="width:"+radius+"px;height:"+radius+"px;left:"+j*radius+"px;top:"+i*radius+"px;background:"+(_data[j]==0?"transparent":bgColor);
varli=createDom({tagName:"li",style:style,on:_data[j]?1:0});
ul.appendChild(li);
}
}
ulList.push(ul);
}
for(vari=0;i<cols;i++){
for(varj=0;j<rows;j++){
createFlyer({left:i*120+xOffset,top:120*j});
}
}
functionsetULBgColor(dom,color){
varlis=dom.getElementsByTagName("li");
for(vari=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);
}
}
functionreset(fn){
varlastIndex=ulList.length-1;
for(vari=0,length=ulList.length;i<length;i++){
varul=ulList[i];
(function(i,ul){
setTimeout(function(){
setULBgColor(ul,getColor());
if(i===lastIndex){
fn?fn():void(0);
}
},i*30);
})(i,ul);
}
};
functionfirstStep(){
varcolor=getColor();
varlastIndex=ulList.length-1;
for(vari=0,length=ulList.length;i<length;i++){
varul=ulList[i];
(function(i,ul){
setTimeout(function(){
setULBgColor(ul,color);
if(i==lastIndex){
secondStep();
}
},i*30);
})(i,ul);
}
}
functionsecondStep(){
reset(thirdStep);
}
functionthirdStep(){
varangle=0;
varaddAngle=15;
varinterval=setInterval(function(){
angle+=addAngle;
if(angle>720){
angle=0;
clearInterval(interval);
createMatrix2();
}
for(vari=0,length=ulList.length;i<length;i++){
varul=ulList[i];
ul.style.webkitTransform="rotate("+angle+"deg)";
}
},50);
}
functioncreateMatrix2(){
body.innerHTML="";
variLength=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(vari=0;i<iLength;i++){
var_data=matrixData2[i];
for(varj=0;j<jLength;j++){
varstyle="width:"+radius+"px;height:"+radius+"px;left:"+j*radius+"px;top:"+i*radius+"px;background:"+(_data[j]==0?"transparent":getColor());
varli=createDom({tagName:"li",style:style,on:_data[j]?1:0});
li.className="arc";
ul.appendChild(li);
}
}
ul.style.webkitTransform="scale(0.1,0.1)";
varscale=0.1;
varinterval=setInterval(function(){
ul.style.webkitTransform="scale("+scale+","+scale+")";
scale+=0.1;
if(scale>1){
clearInterval(interval);
}
},50);
}
firstStep();
</script>
</html>
更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家JavaScript程序设计有所帮助。