Fork me on GitHub

螺旋显示图像 

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

 

posted @ 2017-04-09 21:20  小数点就是问题  阅读(199)  评论(0)    收藏  举报