View Code

炫酷照片墙，代码简单易懂

还是在分享源代码之前，先晒一下照片

原图是这样的，然后随便点一张小图

它会慢慢的看似拼凑出点的那张图的大图】

 

这里要注意，是慢慢拼凑出，而且再点击一下这个大图，这个大图又会慢慢分散成原来分散的小图片

下面来看一下源代码

html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相册</title>

<style type="text/css">
* {
    margin: 0;
    padding: 0
}

body {
    background-color: #e8e3da;
}

ul {
    list-style: none
}

#wrap {
    width: 980px;
    height: 500px;
}

#wrap li {
    position: absolute;
    left: 0;
    top: 0;
    transition: transform 1500ms ease-out;
    background-color: white;
}

.box {
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: transform 1500ms ease-out;
}

.center {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

}
</style>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    var collums = 5;//列
    var rows = 5;//行
    var wrap = $('#wrap');
    var w = wrap.width() / rows;
    var h = wrap.height() / collums;


    for (var r = 0; r < rows; r++) {
        for (var c = 0; c < collums; c++) {

            $('<li><div class="box"></div></li>').width(w).height(h)
                    .css({
                        'left': w * c + 'px',
                        'top': h * r + 'px',
                        'transform': 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg) ' +
                        'translateX(' + (30*c-60) + 'px)' +
                        'translateY(' + (30*r-60) + 'px)'
                    })
                    .find('.box')
                    .css({
                        'background-image': 'url(images/' + (r * collums + c) + '.jpg)',
                        'transform': 'scale(0.9)'
                    })
                    .end()
                    .appendTo(wrap)
        }
    }

    var change = true;
    wrap.find('li').on('click', function () {
        if (change == true) {
            var bgImg = $(this).find('div').css('background-image');
            var bgLeft = 0;
            var bgTop = 0;
            $('#wrap li').each(function (index) {
                var $this=$(this);
                $(this).delay(40*index).animate({"opacity":0},200, function () {
                    $this.css({
                        'transform': ' rotate(0deg) ' +
                        'translateX(0)' +
                        'translateY(0)'
                    });
                    $this.find('div').css({
                        'background-image': bgImg,
                        'background-size': 'auto',
                        'backgroundPositionX': -bgLeft,
                        'backgroundPositionY': -bgTop,
                        'transform': 'scale(1)'
                    });
                    bgLeft += 196;
                    if (bgLeft >= 980) {
                        bgTop += 100;
                        bgLeft = 0;
                    }
                    $this.animate({"opacity":1},300);
                })




            });
            change = false;

        } else if (change == false) {

            $('#wrap li').each(function (index) {
                var c=index %collums;
                var r=parseInt(index/collums);
                var $this=$(this);
                $(this).delay(40*index).animate({"opacity":0},200, function () {
                    $this.css({
                        'transform': 'rotate(' + (Math.random() * 40 - 20) + 'deg)' +
                        'translateX(' + (30*c-60) + 'px)' +
                        'translateY(' + (30*r-60) + 'px)'
                    });
                    $this.find('div').css({
                        'background-image': 'url(images/' + index + '.jpg)',
                        'background-size': 'cover',
                        'transform': 'scale(0.9)'
                    });
                    $this.animate({"opacity":1},200);
                })

            });
            change = true;
        }
    })
})
</script>
</head>
<body>

<ul id="wrap" class="center"></ul>

</body>
</html>

然后js是用的jQuery包

图片的话，只截个图看一下吧

你们也来试一下吧

posted @ 2017-07-21 14:42  风中摇曳的小花朵  阅读(3257)  评论(0)  编辑  收藏  举报