一、触壁反弹
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例-触壁反弹-前端猫</title> <style> *{ padding:0; margin:0; } #root{ position: relative; width: 500px; height: 500px; border:20px solid skyblue; margin:0 auto; } #ball{ position: absolute; width: 50px; height: 50px; padding:10px; border:2px solid green; border-radius: 100px; background-image: url("../../../icon.png"); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div id="root"> <div id="ball"></div> </div> </body> <script> var root = document.getElementById("root"); var ball = document.getElementById("ball"); var x = 0;// left值 横向的距离 var y = 0;// top值 纵向的距离 // left最大值 var maxLeft = root.clientWidth - ball.offsetWidth; // top最大值 var maxTop = root.clientHeight - ball.offsetHeight; // left移动速度,正数向右，负数向左 var speedX = 5; // top移动速度，正数向下，负数向上 var speedY = 3; setInterval(function (){ x+=speedX; y+=speedY; // 横向 if(x>maxLeft){// 限制最大值 x=maxLeft; speedX = -speedX; }else if(x<0){// 限制最小值 x=0; speedX = -speedX; } // 纵向 if(y>maxTop){// 限制最大值 y=maxTop; speedY = -speedY; }else if(y<0){// 限制最小值 y=0; speedY = -speedY; } ball.style.left = x+"px"; ball.style.top = y+"px"; },30) </script> </html>
二、多个小球躁动
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例：多个小球-前端猫</title> <style> * { padding: 0; margin: 0; } #root { position: relative; width: 500px; height: 500px; border: 20px solid skyblue; margin: 0 auto; } </style> </head> <body> <div id="root"> </div> </body> <script> var root = document.querySelector("#root"); var rootClientW = root.clientWidth; var rootClientH = root.clientHeight; // 小球数量 var ballNum = 30; function getRandom(min, max) { console.log(min, max); return Math.floor(Math.random() * (max - min + 1) + min); } var str = ""; for (var i = 0; i < ballNum; i++) { var wh = getRandom(20, 100); var topX = getRandom(0, rootClientH - wh); var left = getRandom(0, rootClientW - wh); var ball = (` <div data-speedX="${getRandom(3, 20)}" data-speedY="${getRandom(3, 20)}" style="top:${topX}px;left:${left}px; position: absolute;width:${wh}px; height:${wh}px;border-radius:100%; background:rgb(${getRandom(1, 255)},${getRandom(1, 255)},${getRandom(1, 255)})"> </div> `); str += ball; } root.innerHTML = str; var balls = document.querySelectorAll("#root div"); setInterval(function () { balls.forEach(function (item) { // item.style.left =200 var x = item.style.left.replace("px", "") / 1;// 移除px/1 var y = item.style.top.replace("px", "") / 1;// 移除px/1 var maxLeft = root.clientWidth - item.offsetWidth; var maxTop = root.clientHeight - item.offsetHeight; var speedX = item.dataset.speedx / 1; var speedY = item.dataset.speedy / 1; console.log(speedX, speedY) x += speedX; y += speedY; // 横向 if (x > maxLeft) {// 限制最大值 x = maxLeft; item.dataset.speedx = -speedX; } else if (x < 0) {// 限制最小值 x = 0; item.dataset.speedx = -speedX; } // 纵向 if (y > maxTop) {// 限制最大值 y = maxTop; item.dataset.speedy = -speedY; } else if (y < 0) {// 限制最小值 y = 0; item.dataset.speedy = -speedY; } item.style.left = x + "px"; item.style.top = y + "px"; }) }, 30) </script> </html>
