我们先简单的做一个HTML、CSS页面。
<style>
body{
background-color: #ccc;
}
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<body>
![](https://i-blog.csdnimg.cn/blog_migrate/5ebeb7c2bed09e5c07636f9d81148f26.png)
在做动画之前我们首先要知道他的核心原理以及实现步骤:
核心原理:通过定时器setInterval() 不断移动盒子位置。
实现步骤:
获得盒子当前位置(获取位置用div.offsetLeft)
让盒子在当前位置加上1个移动距离(更改位置用div.style.left)
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位,才能使用element.style.left
js代码如下:
<script>
var div = document.querySelector('div');
var timer = setInterval(function () {
div.style.left = div.offsetLeft + 5 + 'px';
}, 30)
</script>
结果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/1e04acbde18efdac448c9aa5c7fffb94.png)
红色方块会超出页面范围,大家想想这是为什么呢?
我们上面这段代码只是添加了定时器,但是没有设置停止动画(停止动画本质就是停止计时器),所以才会出现这样的情况,为了避免这样的事发生,我们添加一个判断语句来设置。
<script>
var div = document.querySelector('div');
var timer = setInterval(function () {
if (div.offsetLeft >= 400){
clearInterval(timer);
}
div.style.left = div.offsetLeft + 10 + 'px';
}, 30)
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/b275a131390a8773bd7ad3c3c3299fad.png)
当距离左边距400px时就会停止动画达到我们想要的结果。