有源码吗。。。
想下个源码仔细看看
1 回答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ball animation</title>
<script src="node_modules/bluebird/js/browser/bluebird.js"></script>
<style>
.ball{
width:40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background-color: red;
}
.ball2{
background-color: yellow;
}
.ball3{
background-color: blue;
}
</style>
<script>
window.onload=function () {
var ballObj1=document.querySelector(".ball1");
var ballObj2=document.querySelector(".ball2");
var ballObj3=document.querySelector(".ball3");
function animation(object,distance,callback) {
setTimeout(function () {
var mainginLeft=parseInt(object.style.marginLeft,10);
console.log(mainginLeft);
if(mainginLeft==distance){
callback && callback();
}else{
if(mainginLeft<distance){
mainginLeft++;
}
else{
mainginLeft--;
}
object.style.marginLeft=mainginLeft+"px";
animation(object,distance,callback);
}
},13);
}
/*animation(ballObj1,100,function () {
animation(ballObj2,200,function () {
animation(ballObj3,300,function () {
animation(ballObj1,150,function () {
animation(ballObj2,150,function () {
animation(ballObj3,150,function () {
//
})
})
})
})
})
});*/
var Promise=window.Promise;
function PromiseAnimation(object,distance) {
return new Promise(function (resolve,reject) {
function _animation() {
setTimeout(function () {
var mainginLeft=parseInt(object.style.marginLeft,10);
console.log(mainginLeft);
if(mainginLeft==distance){
resolve();
}else{
if(mainginLeft<distance){
mainginLeft++;
}
else{
mainginLeft--;
}
object.style.marginLeft=mainginLeft+"px";
_animation();
}
},2);
}
_animation();
});
}
PromiseAnimation(ballObj1,100)
.then(function () {
return PromiseAnimation(ballObj2,200);
})
.then(function () {
return PromiseAnimation(ballObj3,300);
})
.then(function () {
return PromiseAnimation(ballObj1,150);
})
.then(function () {
return PromiseAnimation(ballObj2,150);
})
.then(function () {
return PromiseAnimation(ballObj3,150);
})
}
</script>
</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>
</body>
</html>
举报
0/150
提交
取消
