<!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>
