前端小球波澜特效

HTML部分

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h3>点击下方小球</h3>
    <div id="container" class="container"></div>
    <script src="main.js"></script>
</body>
</html>```
css部分
```*{
    box-sizing: border-box;
}

body{
    background-color: #333;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    width: 450px;
    height: 450px;
}

.circle{
    background-color: #fff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    margin: 8px;
    transform: scale(1);
    transition: transform .3s linear;
}

.circle.grow{
    transform: scale(2);
}```
js部分
```const container = document.getElementById("container")
const circleArr = []

let rows = 15
let cols = 15

// 生成小圆点
for(let i=0; i<cols; i++){
    circleArr[i] = []
    for(let j=0; j<rows; j++){
        const circle = document.createElement("div")
        circle.classList.add("circle")
        container.appendChild(circle)
        circleArr[i].push(circle)
    }
}

// 获得每一个圆点
circleArr.forEach((cols,i) => {
    cols.forEach((circle,j) => {
        circle.addEventListener("click",() => {
            growCircles(i,j)
        })
    })
})

function growCircles(i,j) {
    if(circleArr[i]&&circleArr[i][j]){ // 先进行判断，如果传来i，j的值则进行下一步
        if(!circleArr[i][j].classList.contains("grow")){ // 判断选中小球是否有“grow”类名，如果没有进行下一项，如果有则不进行任何操作
            circleArr[i][j].classList.add("grow") // 给选中小球添加"grow"类名，小球会变大
            setTimeout(() => {                    // 添加计时器，使点击小球周围的四个在经过一定时间后也变大，之后递归本函数，触发一系列连锁反应
                growCircles(i+1,j)
                growCircles(i-1,j)
                growCircles(i,j+1)
                growCircles(i,j-1)
            }, 100);
            setTimeout(() => {
                circleArr[i][j].classList.remove("grow") // 再添加计时器，去除小球的特效
            }, 300);
        }
    }
}```
posted @ 2020-05-13 17:21  土狗一号  阅读(154)  评论(0)    收藏  举报