快捷導航

原生js實現(xiàn)彈動小球效果

更新時間：2022年04月12日 15:51:49 作者：Mr.王征

這篇文章主要為大家詳細介紹了原生js實現(xiàn)彈動小球效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)彈動小球效果展示的具體代碼，供大家參考，具體內(nèi)容如下

源碼展示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>彈彈球（原生js）</title>
?
<style>
* {
?? ?margin:0;
?? ?padding:0;
?? ?font-family:Microsoft YaHei,serif;
}
li {
?? ?list-style:none;
}
.ball {
?? ?position:absolute;
?? ?top:0;
?? ?left:0;
?? ?width:100px;
?? ?height:100px;
?? ?background:pink;
?? ?border-radius:50%;
}
</style>
</head>
<body>
<div></div>
?
<script>
? play(10);
?
? function play(num) {
? ? ? //生成num個div
? ? ? for (var i = 0; i < num; i++) {
? ? ? ? ? var Div = document.createElement("div");
? ? ? ? ? Div.className = "ball";
? ? ? ? ? Div.leftVal = 3 + i; //預(yù)存每個球的初始速度
? ? ? ? ? Div.topVal = 3 + i; //預(yù)存每個球的初始速度
? ? ? ? ? Div.style.backgroundColor = randomC();
? ? ? ? ? document.body.appendChild(Div);
? ? ? }
?
? ? ? var aBall = document.querySelectorAll(".ball");
? ? ? maxTop = document.documentElement.clientHeight - aBall[0].clientHeight, //獲取top的最大值
? ? ? ? ? maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //獲取left的最大值
?
? ? ? window.onresize = function() {
? ? ? ? ? maxTop = document.documentElement.clientHeight - aBall[0].clientHeight; //獲取top的最大值
? ? ? ? ? maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //
? ? ? };
?
? ? ? auto();
?
? ? ? function auto() {
? ? ? ? ? for (var i = 0; i < num; i++) {
? ? ? ? ? ? ? var Ball = aBall[i],
? ? ? ? ? ? ? ? ? startL = Ball.offsetLeft, //取每個球的初始left和TOP值
? ? ? ? ? ? ? ? ? startT = Ball.offsetTop, //取每個球的初始left和TOP值
? ? ? ? ? ? ? ? ? Left = startL + Ball.leftVal, //改變，每個球的left和top值
? ? ? ? ? ? ? ? ? Top = startT + Ball.topVal; //改變，每個球的left和top值
?
?
? ? ? ? ? ? ? if (Left >= maxLeft || Left <= 0) {
? ? ? ? ? ? ? ? ? Left = Math.min(Left, maxLeft); //限制Left的最大值
? ? ? ? ? ? ? ? ? Left = Math.max(Left, 0); //限制最小值
?
? ? ? ? ? ? ? ? ? Ball.leftVal = -Ball.leftVal;
? ? ? ? ? ? ? ? ? Ball.style.backgroundColor = randomC();
?
? ? ? ? ? ? ? }
? ? ? ? ? ? ? if (Top >= maxTop || Top <= 0) {
? ? ? ? ? ? ? ? ? Ball.topVal = -Ball.topVal;
?
? ? ? ? ? ? ? ? ? Top = Math.min(Top, maxTop); //限制Left的最大值
? ? ? ? ? ? ? ? ? Top = Math.max(Top, 0); //限制最小值
? ? ? ? ? ? ? ? ? Ball.style.backgroundColor = randomC();
? ? ? ? ? ? ? }
?
?
? ? ? ? ? ? ? Ball.style.top = Top + "px";
? ? ? ? ? ? ? Ball.style.left = Left + "px";
? ? ? ? ? }
? ? ? ? ? requestAnimationFrame(auto)
?
? ? ? }
? ? ? // rgb(0-255)
? ? ? function randomC() {
? ? ? ? ? var r = Math.floor(Math.random() * 256),
? ? ? ? ? ? ? g = Math.floor(Math.random() * 256),
? ? ? ? ? ? ? b = Math.floor(Math.random() * 256);
? ? ? ? ? return "rgb(" + r + "," + g + "," + b + ")";
? ? ? }
?
? }
</script>
?
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: