原生js实现弹动小球效果
更新时间：2022年04月12日 15:51:49 作者：Mr.王征
这篇文章主要为大家详细介绍了原生js实现弹动小球效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现弹动小球效果展示的具体代码，供大家参考，具体内容如下
源码展示
<!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中async函数结合promise的小案例浅析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
tab选项卡效果就是当我指上或经过时就会显示这个选项卡下面的内容，下面我来给大家介绍一款纯js实现的TAB选项卡效果，有需要的朋友可以参考一下2013-08-08
本文主要介绍了js实现移动端微信页面禁止字体放大的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了万字详解JavaScript手写一个Promise，Promise就是一个类，在执行这个类的时候，需要传递一个执行器(回调函数)进去，执行器会立即执行2022-07-07
大家如果使用firebug去查看的话就会发现，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。2010-04-04
这篇文章主要为大家详细介绍了微信小程序自定义计时器功能，设置一个时间，可以开始倒计时、暂停，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要为大家详细介绍了JavaScript实现简单的星星评分效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了JavaScript动画：offset和匀速动画详解(含轮播图的实现)，并把实现代码做了分享，有兴趣的朋友参考下。2018-02-02
这篇文章主要是对Ajax同步与异步传输的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号，具体的实现过程如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
最新评论