首页 > 代码库 > 图片拼图

图片拼图

2024-09-10 16:52:22   220人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <style>
    #container{
        position: absolute;
        top: 50px;
        left: 100px;
    }
    </style>
</head>
<body>
    <div id="container"></div>

    <script>
        /**
         * 图片拼图
         * @param {id} String [需要一个容器，传进一个id值]
         * @param {rows} Number [传入行数]
         * @param {cols} Number [传入列数]
         * @param {url} String [传入图片路径]
         * 
         */
        dynamicImg("container",10,10,"1.jpg");
    

    function dynamicImg(id,rows,cols,url){
        var defaultParam={
                speed:500
            };
        var oImg=document.createElement("img");
        var oContainer=$("#"+id);
        oImg.src=url;
        oImg.onload=function(){
            oContainer.append(oImg);
            $(oImg).css("opacity",0);
            createLi(rows,cols);
            move();
        }
        /*创造div，图片为背景，使用div把一个图片拼成一个完整的图片
        只要不断移动div位置和图片背景的位置，就可以实现
        */
        function createLi(rows,cols){
            oContainer.append("<div class=‘smallImg‘ id=‘smallImg‘>");
            var $smallImg=$("#smallImg");
            var imgh=$(oImg).height(),imgw=$(oImg).width();
            var r=imgh/rows,c=imgw/cols;
            for(var i=0;i<rows;i++){
                for(var j=0;j<cols;j++){
                    var imgDiv=$("<div class=‘imgDiv‘>");
                    $smallImg.append(imgDiv);
                    imgDiv.get(0).cssT=i*r;
                    imgDiv.get(0).cssL=j*c;
                    imgDiv.css({position:"absolute",
                        top:Math.random()*imgh,left:Math.random()*imgw,
                        opacity:0,
                        width:c,height:r,
                        "background-image":"url("+url+")",
                        "background-position":-j*c+"px -"+i*r+"px"
                        });
                }
            }
        }
        /*移动散乱的图片，拼成完整图片*/
        function move(){
            var $imgDiv=$(".imgDiv");
            $imgDiv.each(function(){
                $(this).animate({top:this.cssT,left:this.cssL,opacity:1},(Math.random()+10)*defaultParam.speed);
            });
        }
    }

    </script>
</body>
</html>

呵呵，就一个拼图，没什么好说。

技术分享

 

图片拼图


联系
我们