<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>螺旋显示图像</title> <style> ul,li{ margin: 0; padding: 0; list-style: none; } ul{ margin: 0 auto; } li{ float: left; opacity: 0; transition: .1s; } </style> </head> <body> <ul id="list"></ul> <script> window.onload=function(){ var oUl=document.querySelector("#list"); createE(oUl,10,2); } function matrix(objArr,size){ /*螺旋矩阵算法 核心:数组，然后根据实际布局计算拐点 */ var max=size-1; var min=0; var arr=[]; var cols=0,rows=0; for(var i=0;i<objArr.length;i++){ arr.push(objArr[cols+rows*size]); /*四个拐点*/ if(cols<max&&rows==min){ cols++; }else if(rows<max&&cols==max){ rows++; }else if(cols>min&&rows==max){ cols--; }else if(rows>min&&cols==min){ rows--; } /*下一次拐点界限*/ if(rows-1==min&&cols==min){ min++; max--; } } move(arr); return arr; } function move(arr){ var time=null; var iNow=0; clearInterval(time); time=setInterval(function(){ if(iNow>=arr.length-1){ clearInterval(time); } arr[iNow].style.opacity=1; iNow++; },50); } function createE(obj,size,size3){ var img=new Image(); var imgW,imgH; img.src="1.jpg"; img.onload=function(){ var createImg=document.createElement("img"); createImg.src=img.src; imgW=createImg.width; imgH=createImg.height; var objArr=createLi(obj,size,imgW,imgH,size3); matrix(objArr,size); } } function createLi(obj,size,size1,size2,size3){ var h=size2/(size*size3),w=size1/(size*size3); var createDoc=null; for(var i=0;i<size;i++){ for(var j=0;j<size;j++){ createDoc=document.createElement("li"); obj.appendChild(createDoc); createDoc.style.width=w+"px"; createDoc.style.height=h+"px"; createDoc.style.background="url(1.jpg) -"+j*w+"px -"+i*h+"px"; createDoc.style.backgroundSize=size1/size3+"px "+size2/size3+"px"; } } obj.style.width=w*size+"px"; return obj.querySelectorAll("li"); } </script> </body> </html>