标签：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
