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

概述div在直线上的移动步骤： 1）首先在body里添加一个div,接着去设置div样式。为了让div移动，设置position为absolute，left设置为0，right设置为0。 2）接着我们去清除一下默认样式。（就是*{} 这部分）。 3）script里的move函数，每次调用时使我的div移动一定的像素。代码如下： <!DOCTYPE html><html> <head> 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前端 -- js动画 -- animation匀速所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1031659.html

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

发表评论

评论列表（0条）