HTML結(jié)構(gòu)

// 動畫組總共有18塊碎片 所以就是18個li
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Css樣式

<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        li {
            list-style-type: none;
        }

        ul {
            width: 600px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
        }

        ul li {
            width: 100px;
            height: 100px;
            float: left;
            position: relative;
            background: url("images/pic.jpg");
        }
</style>

Js代碼

<script src="js/MyFunc.js"></script>
<script>
    window.onload = function () {
        var allLis = document.getElementsByTagName('li');
        // 1. 設(shè)置圖片
        for (var i = 0; i < allLis.length; i++) {
            // 1.1 求出行和列
            allLis[i].cols = i % 6;
            allLis[i].rows = parseInt(i / 6);

            /*allLis[i].innerHTML = '('+allLis[i].rows+', '+allLis[i].cols+')';*/
            // 1.2 設(shè)置背景坐標(biāo)
            allLis[i].style.backgroundPosition = allLis[i].cols * -100 + 'px ' + allLis[i].rows * -100 + 'px';
        }

        // 2. 開啟動畫
        var as = {
            a0: function () {
                for (var i = 0; i < allLis.length; i++) {
                    // 2.1 移動位置
                    allLis[i].style.left = -600 + 'px';
                    allLis[i].style.top = -300 + 'px';
                    allLis[i].style.opacity = 0;

                    // 2.2 歸位
                    (function (index) {
                        setTimeout(function () {
                            buffer(allLis[index], {left: 0, top: 0, opacity: 1})
                        }, index * 100);
                    })(i);
                }
            },
            a1: function () {
                for (var i = 0; i < allLis.length; i++) {
                    var dis = 300;
                    // 2.1 移動位置
                    allLis[i].style.top = (dis *= -1) + 'px';
                    allLis[i].style.opacity = 0;

                    // 2.2 歸位
                    (function (index) {
                        setTimeout(function () {
                            buffer(allLis[index], {top: 0, opacity: 1})
                        }, index * 100);
                    })(i);
                }
            },
            a2: function () {
                for (var i = 0; i < allLis.length; i++) {
                    var dis = 300;
                    // 2.1 移動位置
                    allLis[i].style.top = dis + 'px';
                    allLis[i].style.opacity = 0;

                    // 2.2 歸位
                    (function (index) {
                        setTimeout(function () {
                            buffer(allLis[index], {top: 0, opacity: 1})
                        }, allLis[index].cols * 100);
                    })(i);
                }
            },
            a3: function () {
                for (var i = 0; i < allLis.length; i++) {
                    var dis = 300;
                    // 2.1 移動位置
                    allLis[i].style.top = dis + 'px';
                    allLis[i].style.opacity = 0;

                    // 2.2 歸位
                    (function (index) {
                        setTimeout(function () {
                            buffer(allLis[index], {top: 0, opacity: 1})
                        }, index * 100);
                    })(i);
                }
            },

            a4: function () {
                for (var i = 0; i < allLis.length; i++) {
                    var dis = 600;
                    // 2.1 移動位置
                    allLis[i].style.left = dis + 'px';
                    allLis[i].style.opacity = 0;

                    // 2.2 歸位
                    (function (index) {
                        setTimeout(function () {
                            buffer(allLis[index], {left: 0, opacity: 1})
                        }, allLis[index].cols * 100);
                    })(i);
                }
            },

            a5: function () {
                for (var i = 0; i < allLis.length; i++) {
                    var dis = 600;
                    // 2.1 移動位置
                    allLis[i].style.left = dis + 'px';
                    allLis[i].style.opacity = 0;

                    // 2.2 歸位
                    (function (index) {
                        setTimeout(function () {
                            buffer(allLis[index], {left: 0, opacity: 1})
                        }, index * 100);
                    })(i);
                }
            }
        };

        as.a0();
        var num = 0;
        setInterval(function () {
            num++;
            num %= 6;
            as['a' + num]();
        }, 4000);

    }
</script>

特效展示

• 此動畫并不完整 會有點bug 但是足夠可以幫助小白理解Js動畫

序列圖片