web前端 -- js动画 -- animation匀速
Posted hefeifei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端 -- js动画 -- animation匀速相关的知识，希望对你有一定的参考价值。
div在直线上的移动
步骤：
1）首先在body里添加一个div,接着去设置div样式。为了让div移动，设置position为absolute，left设置为0，right设置为0。
2）接着我们去清除一下默认样式。（就是* 这部分）。
3）script里的move函数，每次调用时使我的div移动一定的像素。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
margin: 0;
padding: 0;
div
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
</style>
</head>
<body>
<div></div>
</body>
</html>4）先运行一下，看我的div是否存在，效果图如下。
5）实现move，在script中做如下修改,可以回浏览器看，div此时是水平移动的啦。
<body>
<div></div>
<script type="text/javascript">
var speedX = 3;//在move之外，先有一个水平移动的速度
var div = document.querySelector('div');//方便move隔一小段时间调用
//实现move
function move()
//在move中取得当前元素所在的left值,调用getComputedStyle传入div
//注意:left是个字符串,且后面可能跟着px单位,在使用之前先用parseInt解析
var currentLeft = parseInt(window.getComputedStyle(div).left) ;
var currentTop = parseInt(window.getComputedStyle(div).top) ;
var left = currentLeft + speedX;//计算left值
div.style.left = left + 'px';//设置水平移动
//调用move函数
setInterval(function()
move()
,20);
</script>
</body>6）同理，设置垂直方向上的参数，可以实现垂直方向移动。
var speedY = 4;//垂直方向
var top = currentTop + speedY;//计算top值
div.style.top = top + 'px'; //设置垂直移动7）斜线运动就是水平方向和垂直方向都设置参数。
以上是关于web前端 -- js动画 -- animation匀速的主要内容，如果未能解决你的问题，请参考以下文章
web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图