js语法写动画
时间: 2024-01-31 18:08:58 浏览: 13
在JavaScript中,可以使用CSS属性的值来控制HTML元素的动画效果。下面是一个简单的例子,使用JavaScript来控制一个元素的位置:
HTML代码:
```html
<div id="box"></div>
```
CSS代码:
```css
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
```
JavaScript代码:
```javascript
var box = document.getElementById('box'); // 获取元素
function move() {
var pos = 0; // 初始位置
var id = setInterval(frame, 10); // 每10毫秒执行一次frame函数
function frame() {
if (pos == 350) { // 当元素到达终点位置时停止动画
clearInterval(id);
} else {
pos++; // 每次移动一个像素
box.style.top = pos + 'px'; // 修改元素的top属性值
box.style.left = pos + 'px'; // 修改元素的left属性值
}
}
}
box.addEventListener('click', move); // 当元素被点击时开始动画
```
上面的例子中,我们通过setInterval()函数来定时执行frame()函数,每次移动一个像素,直到元素到达终点位置时停止动画。同时,我们可以通过修改元素的top和left属性值来改变元素的位置。