代碼運行不了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promise animation</title>
<style>
.ball{
width:40px;
? ? ? ? ? ? height:40px;
? ? ? ? ? ? border-radius: 20px;
? ? ? ? ? ? margin-left:0;
}
.ball1{background: red;}
.ball2{background: yellow;}
.ball3{background: green;}
</style>
</head>
<body>
<div class="ball ball1"></div>
<div class="ball ball2"></div>
<div class="ball ball3"></div>
<script>
var ball1=document.querySelector('.ball1');
var ball2=document.querySelector('.ball2');
var ball3=document.querySelector('.ball3');
function animate(ball,distance,cb){
setTimeout(function(){
var marginLeft=parseInt(ball.style.marginLeft,10);
if(marginLeft===distance){
cb&&cb()
}else{
if(marginLeft<distance){
marginLeft++
}else{
marginLeft--
}
ball.style.marginLeft=marginLeft+'px';
animate(ball,distance,cb);
}
},13)
}
animate(ball1,100,function(){
animate(ball2,200,function(){
animate(ball3,300,function(){
animate(ball3,150,function(){
animate(ball2,150,function(){
animate(ball1,150,function(){
})
})
})
})
})
})
</script>
</html>
2016-10-23
改成：
----------
.ball?{ ????width:?40px; ????height:?40px; ????border-radius:?20px; ????margin-left:?0px; }改成：
.ball?{ ????width:?40px; ????height:?40px; ????border-radius:?20px; }2017-08-02
你的</body>呢？
2016-10-26
與加載有個毛關系。elment.style.marginLeft 意思僅僅是 取得 該元素的屬性 style(如果有)， 的 margin-left（如果有）值。去 內聯樣式表的style屬性 FF or Chrome 用的是 window.getComputedStyle(element, null).getPropertyValue('margin-left')
2016-10-23
應該與加載有關
2016-10-23
跟我一樣的情況