原生js實現彈跳小球
突發奇想,寫瞭個小球來回彈跳的案例,供大傢參考,具體內容如下
主要就是利用瞭margin-left / top 值進行位移,當然,也可以使用定位去做。
本案例所用到的有:
- DOM元素獲取
- DOM樣式操作
- .offsetWidth 獲取元素寬度
- .offsetHeight 獲取元素高度
- setInterval() 定時器
上代碼
整體使用原生js
<style> //style樣式 * { margin: 0; padding: 0; } #box { width: 500px; height: 600px; background-color: #eee; box-shadow: 0 0 10px 0 #000; margin: auto; overflow: hidden; position: relative; margin-top: 50px; } #box div { width: 50px; height: 50px; border-radius: 50%; background-color: #fff; position: absolute; } </style> <body> <div id="box"> <div id="cir"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> <script> var box = document.getElementById("box"); var cir = document.getElementById("cir") var cirs = box.querySelectorAll("div"); collMove(box, cir, 6); collMove(box, cirs[1], 7); collMove(box, cirs[2], 8); collMove(box, cirs[3], 9); collMove(box, cirs[4], 10); collMove(box, cirs[5], 10); collMove(box, cirs[6], 11); /** * 元素遇邊界彈開 * 彈開的同時改變元素顏色 * @param {容器獲取} box * @param {容器內彈跳元素獲取} cir * @param {彈跳速度} speed */ function collMove(box, cir, speed) {//方法封裝 var oDiv = box; //獲取容器 var oCir = cir; //獲取容器內元素 var xMax = oDiv.offsetWidth - oCir.offsetWidth; //容器最大X軸邊界 var yMax = oDiv.offsetHeight - oCir.offsetHeight; //容器最大Y軸邊界 var motionX = 0; //元素X軸坐標初始化 var motionY = 0; //元素y軸坐標初始化 (() => { var speedX = speed; //x軸偏移量 var speedY = speed; //y軸偏移量 setInterval(() => { motionX += speedX; //進行X軸偏移 motionY += speedY; //進行y軸偏移 if (motionX >= xMax) { //檢測是否碰到X軸右邊界 motionX = xMax; //碰到邊界將X軸坐標設為x軸最大右邊界 speedX = -speedX; //x軸偏移量反轉 randColor(oCir); //改變顏色 } else if (motionX <= 0) { //檢測是否碰到X左邊界 motionX = 0; //碰到邊界將X軸坐標設為 0 即左邊界初始位置 speedX = -speedX; //再次反轉X軸偏移量 randColor(oCir); //下方上下邊界檢測同理 } if (motionY >= yMax) { motionY = yMax; speedY = -speedY randColor(oCir); } else if (motionY <= 0) { motionY = 0; speedY = -speedY; randColor(oCir); } oCir.style.marginLeft = motionX + "px"; //設置元素X軸坐標 oCir.style.marginTop = motionY + "px"; //設置元素Y軸坐標 }, 10); })(); function randColor(obj) { //封裝一個隨機色彩,改變顏色直接調用 var op = Math.random() * 7 + 3; function color() { return Math.floor(Math.random() * 256); } return obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})`; } } </script>
整個方法中,最主要的就是理解元素位置與容器邊界的檢測與判斷,這一部分搞懂,剩下的就很簡單瞭。
有個小提示:容器不要設置成標準的正方形,不然會因為角度的原因,小球隻能從左上角到右下角來回彈動。
整個方法都已封裝,需要用時,隻需要復制整個方法或者外鏈進去 然後直接使用方法名依照對應參數調用即可。一個元素一次調用. 閑麻煩可直接寫一個for循環去循環調用。
拋個磚:
for(var i = 1 ; i<=10;i++){ collMove(box,cirs[i],i); }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。