我要评论function yigeqiu(div) {
var x = Math.random() * (window.innerWidth - 100), //div坐上的横坐标
y = Math.random() * (window.innerHeight - 100), //纵坐标
xDis = 2, //每次移动的距离x
yDis = 2, //y
duration = 1, //每次移动的时间 20毫秒
width = 100, // div的宽度
height = 100; // div的高度
div.style.left = x; //初始化位置
div.style.top = y;
// 创建一个定时器
setInterval(function() {
// 获取每次移动后的坐标
x += xDis;
y += yDis;
if (x >= window.innerWidth - width) {
xDis = -xDis;
div.style.backgroundImage = `url('./image/i_1 (${Math.ceil( Math.random()*15)}).jpg')`
}
if (x <= 0) {
xDis = -xDis;
div.style.backgroundImage = `url('./image/i_1 (${Math.ceil( Math.random()*15)}).jpg')`
}
if (y >= window.innerHeight - height) {
yDis = -yDis;
div.style.backgroundImage = `url('./image/i_1 (${Math.ceil( Math.random()*15)}).jpg')`
}
if (y <= 0) {
yDis = -yDis;
div.style.backgroundImage = `url('./image/i_1 (${Math.ceil( Math.random()*15)}).jpg')`
}
// 对div的属性进行操作
div.style.left = x + 'px';
div.style.top = y + 'px';
}, duration);
}
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
yigeqiu(divs[i]);
}
弹跳球方法：
我们需要一个传入一个dom元素，这个dom元素是弹跳球的形状，获取div的左上上的坐标x，y，xDis表示每次x轴移动的距离，yDis表示y轴移动的距离（这两个值用来控制类似移动帧数，值越大卡顿感越强），duration表示每次移动的间隔时间，调整该时间大小也会改变卡顿的感觉，width和height表示传入dom元素的宽高， 首先我们创建一个定时器，setInterval(function,time)该定时器会根据time值表示间隔时间的大小来控制function函数的执行间隔时间，相当于一个循环，然后获取每次移动后的坐标，x，y的值会根据xDis、yDis的值进行修改，当dom元素的左上点的x坐标大于，视口的宽度减去dom元素的宽度时，xDis的值变成负数，这里产生的效果为，当dom元素向右移动时，移动到即将超出视口，就将移动方向改变。这里的xDis的正负影响dom元素的移动方向。其他的if判断，if判断2表示当dom元素即将移动到最左边，改变xDis的值（改变方向）if判断3表示，向下移动到最底部更改方向，if判断4表示，移动到最上端更改移动方向。然后改变dom元素的位置。这个函数每1毫秒触发一次。其中添加了触碰边缘的dom元素随机生成一个背景图片的效果。
当我们有多个dom元素时，dom元素组循环调用这个弹跳球方法就可以生成多个弹跳球方法在页面中。
本文地址：https://blog.csdn.net/weixin_45970898/article/details/108570777
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论