图片的重组和拆分

苍狼寒刃

已于 2022-04-10 16:35:12 修改

阅读量623

点赞数 2

文章标签：前端 html5 css3 js es6

于 2022-04-10 15:46:08 首次发布

本文链接：https://blog.csdn.net/m0_55783584/article/details/124079467

版权

图片的重组和拆分 HTML+CSS+JS

效果图

html部分

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="btn">重组</div>
    <div class="boxes"></div>
</body>
<script src="index.js"></script>

</html>

css部分

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn {
    margin: 20px auto;
    width: 100px;
    line-height: 40px;
    background-color: rgb(51, 239, 101);
    cursor: pointer;
    box-shadow: 0 3px rgba(125, 250, 127, 0.5);
    text-align: center;
}

.btn:first {
    outline: none;
}

.btn:active {
    box-shadow: none;
    transform: translateY(2px);
}

.boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 500px;
    width: 500px;
    transition: 0.4s ease;
}

.boxes.big {
    width: 600px;
    height: 600px;
}

.boxes.big .box {
    transform: rotateZ(360deg);
}

.box {
    background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
    background-repeat: no-repeat;
    background-size: 500px 500px;
    height: 125px;
    width: 125px;
    transition: 0.4s ease;
}

js部分

const boxes = document.getElementsByClassName('boxes')[0]
const btn = document.getElementsByClassName('btn')[0]
let active = false
// 添加或删除class
btn.addEventListener('click', () => {
    boxes.classList.toggle('big')
    if (active) {
        btn.innerHTML = '重组'
    } else {
        btn.innerHTML = '拆分'
    }
    active = !active
})

// 通过循环创建box
function createBox() {
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            const box = document.createElement('div')
            box.classList.add('box')
            box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
            boxes.appendChild(box)
        }
    }
}

// 延迟添加类名
setTimeout(() => {
    boxes.classList.toggle('big')
}, 500)

createBox()

苍狼寒刃

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片的重组和拆分

图片的重组和拆分 HTML+CSS+JShtml部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫