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

10慕课网《进击Node.js基础(一)》初识promise

时间:2018-06-18 19:56:05      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:document   改变   实现   fun   margin   ==   timeout   script   selector   

首先用嘴简单的方式实现一个动画效果

<!doctype>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
    .ball {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }

    .ball1 {
        background: red;
    }
    .ball2 {
        background: yellow;
    }
    .ball3 {
        background: green;
    }

</style>
</head>

<body>
    <div class="ball ball1" style="margin-left: 0"></div>
    <div class="ball ball2" style="margin-left: 0"></div>
    <div class="ball ball3" style="margin-left: 0"></div>
    <script type="text/javascript">
        //定义三个球
        var ball1 = document.querySelector(.ball1)
        var ball2 = document.querySelector(.ball2)
        var ball3 = document.querySelector(.ball3)
        //球,移动距离,回调函数
        function animate(ball, distance, cd){
            //每13毫秒改变一次圆球的位置,直到到达指定位置
            setTimeout(function(){
                var marginLeft = parseInt(ball.style.marginLeft,10)
                //球达到预期位置
                if(marginLeft === distance){
                    cd && cd()
                }else{
                    //球在左侧
                    if(marginLeft < distance){
                        marginLeft++
                    }else{
                        //球在右侧
                        marginLeft--
                    }
                    //调整球的位置
                    ball.style.marginLeft = marginLeft
                    animate(ball, distance, cd)
                }
            },13)
        }
        //控制动画
        animate(ball1, 100,function(){
            animate(ball2, 200, function(){
                animate(ball3, 150, function(){
                    animate(ball2, 150, function(){
                        animate(ball1, 150, function(){

                        })
                    })
                })
            })
        })

    </script>
</body>
</html>

 

10慕课网《进击Node.js基础(一)》初识promise

标签:document   改变   实现   fun   margin   ==   timeout   script   selector   

原文地址:https://www.cnblogs.com/-beauTiFul/p/9195868.html

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