jq 九宫格类似华容道效果

最新推荐文章于 2021-05-22 09:00:05 发布

哈哈绝

最新推荐文章于 2021-05-22 09:00:05 发布

阅读量497

点赞数

分类专栏： js jq jq效果文章标签： jq 九宫格华容道效果

本文链接：https://blog.csdn.net/qq_41194704/article/details/103096241

版权

js 同时被 3 个专栏收录

28 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

jq效果

1 篇文章 0 订阅

订阅专栏

jq 九宫格类似华容道效果

九宫格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #main {
            width: 330px;
            height: 340px;
            margin: 100px auto;
            position: relative;
            border: 1px solid black;
        }

        #main div {
            width: 100px;
            height: 100px;
            margin: 5px;
            float: left;
        }

        div img {
            width: 100px;
            height: 100px;
            display: block;
            position: absolute;
            border: 1px solid black;
        }
    </style>
    <script src="./jquery-3.4.1.js"></script>
</head>

<body>
    <div id="main">
        <div><img src="./1.jpg" alt=""></div>
        <div><img src="./2.jpg" alt=""></div>
        <div><img src="./3.jpg" alt=""></div>
        <div><img src="./4.jpg" alt=""></div>
        <div></div>
        <div><img src="./5.jpg" alt=""></div>
        <div><img src="./6.jpg" alt=""></div>
        <div><img src="./7.jpg" alt=""></div>
        <div><img src="./8.jpg" alt=""></div>
    </div>
    <script>
        //首先我们来布局转换 
        //就是用jq将left 转成position布局
        //首先我们找到所有div的位置然后将它存到一个数组中
        let str = [];
        $('#main div').each((i, elem) => {
            str[i] = new Array();
            str[i][0] = $(elem).position().left;
            str[i][1] = $(elem).position().top;
        })
        $('#main div').each((i, elem) => {
            $(elem).css({
                position: 'absolute',
                left: str[i][0],
                top: str[i][1]
            })
        })
        let attr = [
            [1, 3],
            [1, -1, 3],
            [-1, 3],
            [-3, 1, 3],
            [1, -1, 3, -3],
            [-1, -3, 3],
            [1, -3],
            [1, -1, -3],
            [-1, -3]
        ];
        let a;
        let b = 0;
        dong()
        function dong() {
            $('#main div').each(function (i, elem) {
                if ($(elem).find('img').length == 0) {
                    attr[i] = attr[i].filter((item) => item != (-b));
                    a = Math.floor(Math.random() * attr[i].length);
                    let left = $('#main div').eq(i + attr[i][a]).position().left
                    let top = $('#main div').eq(i + attr[i][a]).position().top
                    $('#main div').eq(i + attr[i][a]).animate({ left: i % 3 * 110, top: Math.floor(i / 3) * 110 }, 1000, function () {
                        $('#main div').eq(i).html($(this).html());
                        $(this).html('').css({ left, top });
                        dong()
                    })
                    b = attr[i][a];
                    return false;
                }
            })
        }
    </script>
</body>

</html>