用JS写一个简单的网页动画
时间: 2023-09-10 19:15:35 浏览: 41
可以使用JavaScript来编写一个简单的网页动画。以下是一个示例,可以让一个DIV元素在页面中移动:
```html
<!DOCTYPE html>
<html>
<head>
<title>用JS写一个简单的网页动画</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 获取元素
var box = document.querySelector('.box');
// 定义变量
var x = 0;
var y = 0;
// 定义动画函数
function animate() {
// 修改元素位置
box.style.left = x + 'px';
box.style.top = y + 'px';
// 修改变量值
x++;
y++;
// 如果元素未移出屏幕,则继续运行动画
if (x < window.innerWidth && y < window.innerHeight) {
requestAnimationFrame(animate);
}
}
// 开始动画
animate();
</script>
</body>
</html>
```
这个示例中,定义了一个名为“box”的DIV元素,并使用CSS来设置它的样式。然后使用JavaScript获取这个元素,并定义两个变量x和y来表示它的位置。接着,在animate()函数中,修改元素的位置,并逐渐增加变量x和y的值,从而让元素在页面中移动。最后,使用requestAnimationFrame()函数来运行动画,如果元素已经移出了屏幕,则停止动画。