js运动基础-2之缓冲运动

缓冲运动

<style>
#div1{
	width:100px;
	height:100px;
	backgroundColor:red;
	position:absolute;
	left:0px;或者600px;  //当div1从左往右移动
}
#div2{
	width:1px;
	height:300px;
	position:absolute;
	top:0px;
	left:300px;
}
<style>

<script type="text/javascript">
	function starMove(){
		var oDiv=document.getElementById('div1');
		setInterval(function(){
			 //随着距离的减小速度逐渐变为0；
			 var speed=(300-oDiv.offsetLeft)/10;
			 //Math.ceil()向上取整，取比自己大的整数，因为浏览器它只识别整数的‘px’像素
		     当我们div1移动到div2那条线时，实际上它移动到296个像素还有4个像素并没有
			 移动，因为浏览器只识别整数像素，296+0.4在浏览器看来就是296，所以它只移动到296
			 我们需要通过Math方法取整，将其余0.4的速度向上取整变为1，将区域的0.4变为1
			 再次移动这样会再次4个像素
		     var speed=Math.ceil(speed);
		     oDiv.style.left=oDiv.offsetLeft+speed+'px';
 		     //当div1从左往右移动也会出现一样的情况，当他从600移动到300，这个时候速度
 			 为负，移动到-304时还有-0.4，我们需要通过Math.floor()方法向下取整，去比自己小的数
 	   	     -0.4取-1。所以会再次移动4个像素；
 	··       var speed=Math..floor(speed);
 			  //所以我们通过三目运算符，当speed速度大于0就说明是从右往左运动，当小于0
 			  就说明是从左往右运动
			  var speed=speed>0？Math.ceil(speed):Math.floor(speed);
			  
			  //这里document.title会将移动距离和速度放在title上
			  document.title=oDiv.offsetLeft+','+speed;
		},30)
	}
</script>

<input id="btn1" type="button" value="开始运动"/>
<div id="div1"></div>
<div id="div2"></div>