HTML小球上下滾動代碼是一種簡單而有趣的動態(tài)效果，通過在HTML文檔中嵌入JavaScript腳本實現(xiàn)小球的上下滾動。
<!DOCTYPE html>
<html>
<head>
<title>HTML小球上下滾動代碼示例</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>代碼中首先定義了一個id為“ball”的div元素作為小球，通過設置style屬性中的position和top實現(xiàn)小球的定位；然后在JavaScript中定義了moveBall函數(shù)，該函數(shù)用于控制小球的運動，每次移動1個像素，當小球到達文檔頂部或底部時改變運動方向。
最后通過setInterval函數(shù)定期調用moveBall函數(shù)，實現(xiàn)小球的自動上下滾動效果。