螺旋矩阵(晕晕)
2017-01-10 15:24
267 查看
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} li{ list-style:none;} #ul1{ margin:20px auto; border:1px #FFF solid; border-bottom:none; border-right:none; overflow:hidden; background-image:url(img/bg.jpg); background-size:cover;} #ul1 li{ float:left; border:1px #FFF solid; border-top:none; border-left:none; background-size:cover;} #ul1 li.active{ animation:0.5s linear infinite flash; -webkit-animation:0.5s linear infinite flash;} @keyframes flash{ 0%{ opacity:0.1;} 50%{ opacity:1;} 100%{ opacity:0.1;} } @-webkit-keyframes flash{ 0%{ opacity:0.1;} 50%{ opacity:1;} 100%{ opacity:0.1;} } </style> </head> <body> <ul id="ul1"> </ul> <script> var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var size = 8; var len = size * size; var sizeGird = 50; var row = 0; var col = 0; var min = 0; var max = size - 1; var arr = []; var bgArr = []; oUl.style.width = size * (sizeGird + 1) + 'px'; for(var i=0;i<len;i++){ var oLi = document.createElement('li'); oLi.style.width = sizeGird + 'px'; oLi.style.height = sizeGird + 'px'; oUl.appendChild(oLi); } for(var i=0;i<len;i++){ //aLi[ row * size + col ].innerHTML = i; arr.push( aLi[ row * size + col ] ); if( row == min && col < max ){ col = col + 1; } else if( col == max && row < max ){ row = row + 1; } else if( row == max && col > min ){ col = col - 1; } else if( col == min && row > min ){ row = row - 1; } if( row - 1 == min && col == min ){ min = min + 1; max = max - 1; } } /*var iNow = 0; setInterval(function(){ for(var i=0;i<aLi.length;i++){ aLi[i].style.backgroundImage = ''; } arr[iNow].style.backgroundImage = 'url(img/1.jpg)'; iNow++; },200);*/ for(var i=0;i<aLi.length;i++){ if(i%5==0){ var bgImage = 'url(img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)'; arr[i].style.backgroundImage = bgImage; bgArr.push([i,bgImage]); } } run(); setInterval(run,1000); function run(){ for(var i=0;i<aLi.length;i++){ aLi[i].style.backgroundImage = ''; aLi[i].className = ''; } for(var i=0;i<bgArr.length;i++){ bgArr[i][0] = bgArr[i][0] + 1; if(arr[ bgArr[i][0] ]){ arr[ bgArr[i][0] ].style.backgroundImage = bgArr[i][1]; arr[ bgArr[i][0] ].className = 'active'; arr[ bgArr[i][0] ].style.animationDelay = -Math.random()*2 + 's'; arr[ bgArr[i][0] ].style.webkitAnimationDelay = -Math.random()*2 + 's'; } else{ bgArr.pop(); var bgImage = 'url(img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)'; bgArr.unshift([0,bgImage]); } } } </script> </body> </html>
View Code
相关文章推荐
- pat 1050. 螺旋矩阵
- 从键盘输入一个整数(1~20) 则以该数字为矩阵的大小,把1,2,3…n*n 的数字按照顺时针螺旋的形式填入其中。
- 螺旋矩阵赋值或输出
- PAT乙级1050. 螺旋矩阵(25)
- 1050. 螺旋矩阵(25)
- 矩阵顺时针螺旋赋值
- [C++]LeetCode: 110 Spiral Matrix (螺旋输出矩阵元素)
- 螺旋矩阵(由外自内旋转)
- NOIP 2014 普及组 T3 螺旋矩阵
- 1050. 螺旋矩阵(25)
- 螺旋矩阵——正逆序
- 1050. 螺旋矩阵(25)
- Java基础知识_day06_(螺旋矩阵,控制台打印图案)
- 1050. 螺旋矩阵(25)
- 矩阵螺旋遍历Spiral Matrix,Spiral Matrix2
- java 螺旋数据矩阵
- 经典算法(四) 数组相关 & 螺旋矩阵 & 数字大小写转换
- 螺旋三角矩阵
- 编程题之--打印二维螺旋矩阵
- [Leetcode] spiral matrix 螺旋矩阵