Document

#ball {

border-radius: 50%;

position: absolute;

}

var ball = document.getElementById("ball");

var a = { x: 100, y: 50, r: 25, w: 4, h: 5, g: 2, color: "red" }

ball.style.left = a.x + "px";//初始位置

ball.style.top = a.y + "px";

ball.style.width = a.r * 2 + "px";//球的參數(shù)

ball.style.height = a.r * 2 + "px";

ball.style.background = a.color;//顏色

var time = setInterval(function () {

a.x += a.w; //移動(dòng)距離

a.y += a.h;

a.h += a.g; //掉落加速

ball.style.top = a.y + "px";

ball.style.left = a.x + "px";

if (a.y > 500) {//漂移+回彈

a.h = -a.h * 0.8;

}

}, 50);

一鍵復(fù)制

編輯

Web IDE

原始數(shù)據(jù)

按行查看

歷史

總結(jié)

以上是生活随笔為你收集整理的html小球跳跃技术原理,弹跳的小球.html · web-project-songyu/原生js小例子 - Gitee.com...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。