javascript实现减速运动

javascript实现减速运动

html:

  <input type="button"  value="start" onclick="show()"/>
 <div id="content">
 </div>

css:

 #content{
     height:100px;
     width:100px;
     background:green;
     position:absolute;
     top:100px;
     left:600px;
 }

javascript:

其实这里面有有些原理和“机关”,我都不讲了~,不是好难滴,自己领悟哈

   var Timer=null;
   var speed=0;
   var count=10;
  function showV(iTarget){
      var obj=document.getElementById("content");
      clearInterval(Timer);
      Timer=setInterval(function (){
       speed=(iTarget-obj.offsetLeft)/count;
       speed=speed>0?Math.ceil(speed):Math.floor(speed); //这里又很多机关,我都不多讲了
       if(Math.abs(obj.offsetLeft)==iTarget){
           clearInterval(Timer)
       }else{
          obj.style.left=obj.offsetLeft+speed+"px";   
       }
      },30)
  }
  function show(){
      showV(300);
  }

就这些了滴呀

posted @ 2016-01-29 20:52  咕-咚  阅读(508)  评论(0编辑  收藏  举报