有源碼嗎。。。
想下個源碼仔細(xì)看看
這是步好棋
2016-10-23
1 回答
舉報
0/150
提交
取消
想下個源碼仔細(xì)看看
2016-10-23
舉報
2016-10-26
<!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>