HTML小球上下滾動(dòng)代碼是一種簡(jiǎn)單而有趣的動(dòng)態(tài)效果，通過在HTML文檔中嵌入JavaScript腳本實(shí)現(xiàn)小球的上下滾動(dòng)。
<!DOCTYPE html>
<html>
<head>
<title>HTML小球上下滾動(dòng)代碼示例</title>
<style>
#ball {
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
var ball = document.getElementById("ball");
var y = 0;
var direction = 1;
function moveBall() {
y += direction;
if (y < 0) {
direction = 1;
}
if (y > window.innerHeight - ball.offsetHeight) {
direction = -1;
}
ball.style.top = y + "px";
}
setInterval(moveBall, 10);
</script>
</body>
</html>代碼中首先定義了一個(gè)id為“ball”的div元素作為小球，通過設(shè)置style屬性中的position和top實(shí)現(xiàn)小球的定位；然后在JavaScript中定義了moveBall函數(shù)，該函數(shù)用于控制小球的運(yùn)動(dòng)，每次移動(dòng)1個(gè)像素，當(dāng)小球到達(dá)文檔頂部或底部時(shí)改變運(yùn)動(dòng)方向。
最后通過setInterval函數(shù)定期調(diào)用moveBall函數(shù)，實(shí)現(xiàn)小球的自動(dòng)上下滾動(dòng)效果。