溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了原生js怎么實現彈動小球效果的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇原生js怎么實現彈動小球效果文章都會有所收獲，下面我們一起來看看吧。
效果如下
源碼展示
<!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; //預存每個球的初始速度
Div.topVal = 3 + i; //預存每個球的初始速度
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>關于“原生js怎么實現彈動小球效果”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“原生js怎么實現彈動小球效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
