今天來講一個JS的特效，主要用到的是定時器和選擇器，也算是一個比較基礎的但同時也是效果很炫的一個特效，老規矩，先來看看效果！
樣式效果
1.這是一開始的時候
2.滑鼠點擊一個小球
3.隨著時間慢慢變化
4.像波紋一樣的傳播
5.后續的小球會慢慢變小
視頻還沒過審核，過了我會發在評論區，在這也附上B站鏈接
設計思路
1.首先是先用js生成一個15行15列的div矩陣，并添加到父級container中，然后設定小div的margin: 8px;和border-radius: 50%;，讓這些小的div呈現為圓形，并且有一定的間距，
2.css樣式也是通過js控制的，js代碼里寫的很詳細，其中transition: transform 0.3s linear;和transform: scale(2);要說一下，第一個是讓這些小球線性變化，第二個屬性是讓小球變大為之前小球的兩倍，
3.將15行15列的小球存為一個二維陣列，然后遍歷添加點擊事件，
4.最后設定點擊小秋后，當前小球先變大，然后延時0.1秒周圍小球開始變大（變大的程序為0.3秒），然后延時0.3秒還原周圍的小球的大小，
最后附上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>波紋小球</title>
</head>
<body>
<h3>點擊下方小球</h3>
<div id="container" class="container"></div>
<script src="main.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: #333;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 100vh就是全部的view的高度，也就是網頁的全部高度 */
height: 100vh;
margin: 0;
}
h3 {
color: #fff;
letter-spacing: 1px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
/* 設定子級div不換行 */
flex-wrap: wrap;
width: 450px;
}
.circle {
background-color: #fff;
/* 設定圓角，就是成了一個圓形 */
border-radius: 50%;
cursor: pointer;
margin: 8px;
height: 14px;
width: 14px;
transition: transform 0.3s linear;
}
/* 變大兩倍 */
.circle.grow {
transform: scale(2);
}
// 獲取節點
const container = document.getElementById("container");
const circlesArr = [];
// 行和列
let rows = 15;
let cols = 15;
// for回圈創建所有的小球,并push到circlesArr保存
for (let i = 0; i < cols; i++) {
circlesArr[i] = [];
for (let j = 0; j < rows; j++) {
// 生成子元素div
const circle = document.createElement("div");
// 添加class屬性circle
circle.classList.add("circle");
// 將div添加到container中
container.appendChild(circle);
// 將div添加到陣列中
circlesArr[i].push(circle);
}
}
// 遍歷并為每個div小球添加點擊事件
circlesArr.forEach((cols, i) => {
cols.forEach((circle, j) => {
circle.addEventListener("click", () => {
growCircles(i, j);
});
});
});
function growCircles(i, j) {
// 確認位置
if (circlesArr[i] && circlesArr[i][j]) {
// 保證身上沒有grow的類名（grow是一個css樣式）
if (!circlesArr[i][j].classList.contains("grow")) {
circlesArr[i][j].classList.add("grow");
// 周圍小球依次變大
setTimeout(() => {
growCircles(i - 1, j);
growCircles(i + 1, j);
growCircles(i, j - 1);
growCircles(i, j + 1);
}, 100);
// 周圍小球再依次還原
setTimeout(() => {
circlesArr[i][j].classList.remove("grow");
}, 300);
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/232471.html
標籤：其他
上一篇：uni-app開發經驗分享十五： uni-app 藍牙列印功能
下一篇：Web前端工程師面試-HTML