<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#div1{
width:20px;
height:20px;
background-color: red;
position:relative;
}
</style>
</head>
<body>
<div id='div1'></div>
</body>
<script type="text/javascript">
//跑火车
// var div1 = document.getElementById('div1');
//setTimeout() 设置 20*20 -> 200*20 用时3秒
var MAX = 400;//div的最大宽度
var EDGE = 20;//div的最小宽
var LENGTH = MAX - EDGE;//div火车跑的长度
var INTERVAL = 10;//时间间隔
var PERIOD = 3000;//总时长
var SPEED = Math.floor(LENGTH/(PERIOD/INTERVAL));//每次增长的长度
function startLonger(){
var div1 = document.getElementById('div1');
var width = div1.clientWidth;
if(width<MAX){
width += SPEED;
div1.style.width = width+'px';
setTimeout(startLonger,INTERVAL);
}else{
div1.style.width = MAX+'px';
setTimeout(shortLonger,INTERVAL);
}
}
setTimeout(startLonger,INTERVAL);
function shortLonger(){
var div1 = document.getElementById('div1');
var width = div1.clientWidth;
if(width>EDGE){
width -= SPEED;
div1.style.width = width+'px';
div1.style.left = (MAX-width)+'px';
setTimeout(shortLonger,INTERVAL);
}else{
div1.style.width = EDGE+'px';
}
}
</script>
</html>