无聊用原生JS写的一个多小球椭圆运动特效
1.改变窗口会自动改变椭圆形状和小球大小
2.随机改变小球颜色
3.可以随意设置小球个数，运动速度等
效果图：
响应式椭圆运动特效
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式椭圆运动特效</title>
<style>
</style>
</head>
<body>
<script>
var dotArr = [];
// num设置小圆的个数
var num = 15;
init()
function init() {
for (var i = 0; i < num; i++) {
var dot = ce("div", {
borderRadius: "50%",
background: "#" + Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, "0"),
position: "absolute",
zIndex: "999",
})
dot.radian = 0 + 360 / num * i;
dotArr.push(dot)
dotArr.scale = 50 / document.documentElement.clientWidth
dotArr.changeColorTime = 10;
document.body.appendChild(dot)
}
circlingMotion(dotArr, { x: document.documentElement.clientWidth / 2, y: document.documentElement.clientHeight / 2 }, document.documentElement.clientWidth / 4, document.documentElement.clientHeight / 4);
window.addEventListener("resize", resizeHandler)
}
// 窗口改变处理函数
function resizeHandler() {
clearInterval(dotArr.timer);
for (var i = 0; i < num; i++) {
dotArr[i].style.width = dotArr.scale * document.documentElement.clientWidth
}
circlingMotion(dotArr, { x: document.documentElement.clientWidth / 2, y: document.documentElement.clientHeight / 2 }, document.documentElement.clientWidth / 4, document.documentElement.clientHeight / 4);
}
// 椭圆运动函数
function circlingMotion(domList, centrePoint, a, b) {
// 圆的轨迹
// var circle = ce("div", {
// borderRadius: "50%",
// width: a * 2 - 2 + "px",
// height: b * 2 - 2 + "px",
// border: "1px dashed #ccc",
// position: "absolute",
// left: centrePoint.x - a + "px",
// top: centrePoint.y - b + "px"
// })
// document.body.appendChild(circle)
// 设置定时器
domList.timer = setInterval(() => {
for (var i = 0; i < num; i++) {
domList[i].style.left = centrePoint.x + a * Math.cos(domList[i].radian / 180 * Math.PI) - domList[i].offsetWidth / 2 + "px";
domList[i].style.top = centrePoint.y - b * Math.sin(domList[i].radian / 180 * Math.PI) - domList[i].offsetWidth / 2 + "px";
domList[i].style.width = domList[i].style.height = domList[i].offsetLeft / 10 + 5 + "px";
domList[i].style.opacity = domList[i].offsetLeft / document.documentElement.clientWidth;
domList[i].radian += 2
// 闪瞎狗眼
dotArr.changeColorTime--;
if (dotArr.changeColorTime < 0) {
domList[i].style.background = "#" + Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, "0");
dotArr.changeColorTime = 10
}
}
}, 1000 / 60);
}
function ce(type, style) {
var elem = document.createElement(type)
Object.assign(elem.style, style)
return elem;
}
</script>
</body>
</html>
