您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了原生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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。