码迷,mamicode.com
首页 > Web开发 > 详细

web前端 -- js动画 -- animation匀速

时间:2019-10-02 00:36:47      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:html   ext   div移动   title   png   interval   src   script   str   

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匀速

标签:html   ext   div移动   title   png   interval   src   script   str   

原文地址:https://www.cnblogs.com/hefeifei/p/11616544.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!