加速 减速！！！！！！！

把以下效果改成加速  和减速
没什么要求 别直接从网上找个答案往上贴就行.......
各位大虾指教下吧！
<div id='sss' style="height:30px; width:700px; border:1px solid #000000; padding:20px; ">
<div id='ss' style="height:20px; width:20px; background-color:#000000; position:relative; "></div>
</div>
<script>
var time = null;
function $(Id){return document.getElementById(Id)};
function move(){
var distance =parseInt($('ss').style.left)||0;
$('ss').style.left=distance +1;
if(parseInt($('ss').style.left)>parseInt($('sss').offsetWidth)-60)
clearTimeout(time)
}
time =setInterval(move,1)
</script>

解决方案 »

  1.   

    首先修正：
    clearTimeout(time)
    ==>
    clearInterval(time)加速、减速 什么意思，如何执行
      

  2.   

    var time = null;
    int i = 1;
    function $(Id){return document.getElementById(Id)};
    function move(){
        var distance =parseInt($('ss').style.left)||0;
        $('ss').style.left=distance + i++;
        if(parseInt($('ss').style.left)>parseInt($('sss').offsetWidth)-60)
            clearInterval(time);
    }
    time = setInterval(move,1)这样吗
      

  3.   

    额  是这中效果额 
    位置控制下  最终的位置在parseInt($('sss').offsetWidth)-60这里哈！~
      

  4.   


    time =setInterval(move,X)
    X 间隔执行的时间，如果X值小那么间隔执行函数move多，移动快；X值大则相反，所以
    X 大= 减速；X 小 = 加速
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>弹簧效果</title>
    <script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };function addEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
    oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
    oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
    oTarget["on" + sEventType] = fnHandler;
    }
    };var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }
    var Bounce = Class.create();
    Bounce.prototype = {
      //容器对象,滑动对象,原始位置,移动范围
      initialize: function(container, obj, iOrigin, iRange, options) {
    this._obj = $(obj);//滑动对象
    this._xo = parseInt(iOrigin);//中轴坐标(即原来坐标)
    this._xt = 0;//目标坐标
    this._xs = [];//目标坐标集合
    this._steps = [];//步长集合
    this._fast = true;//是否加速
    this.Range = iRange || 0;//滑动范围(宽度)
    this.SetOptions(options);
    this.Step = parseInt(this.options.Step);
    this.Time = parseInt(this.options.Time);
    this.Zoom = parseInt(this.options.Zoom);
    this.Reduce = !!this.options.Reduce;
    this.Min = parseInt(this.options.Min);
    this.Max = parseInt(this.options.Max);
    this.onMin = this.options.onMin;
    this.onMax = this.options.onMax;
    this.onSide = this.options.onSide;
    //样式设置
    $(container).style.position = "relative";
    this._obj.style.position = "absolute";
    this._obj.style.left = this._xo + "px";
    if(this.Range > 0) this.Start();
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
    Step: 10,//滑动变化率
    Time: 10,//滑动延时
    Zoom: 0,//缩放变化率
    Reduce: true,//是否缩小
    Min: 0,//最小范围
    Max: 0,//最大范围
    onMin: function(){},//到达最小时执行
    onMax: function(){},//到达最大时执行
    onSide: function(){}//到达边界时执行
        };
        Object.extend(this.options, options || {});
      },
      //从轴点开始
      Start: function(iRange) {
    clearTimeout(this._timer);
    //iRange有值的话重新设置滑动范围
    if(iRange) this.Range = iRange;
    //是否到了最小点
    if(this.Reduce && (this.Range <= 0 || this.Range <= this.Min)) { this.onMin(); return; }
    //是否到了最大点
    if(!this.Reduce && (this.Max > 0 && this.Range >= this.Max)) { this.onMax(); return; }
    //重置位置
    this._obj.style.left = this._xo + "px";
    //设置目标坐标集合(iRange可能会变化所以每次都要设置)
    this._xs = [this._xo + this.Range, this._xo, this._xo - this.Range, this._xo];
    //设置为加速状态
    this._fast = false;
    //开始分段移动
    this.Set();
      },
      //从分段开始
      Set: function() {
    //目标坐标都到达后返回
    if(this._xs.length <= 0){
    //缩放变化率有值的话重新设置范围
    if(this.Zoom > 0) { this.Range += (this.Reduce ? -1 : 1) * this.Zoom; }
    this.Start(); return;
    }
    //取得目标坐标
    this._xt = this._xs.shift();
    //目标坐标是中轴点说明现在是在边界上
    if(this._xt == this._xo) this.onSide();
    //设置步长
    this.SetStep();
    //开始移动
    this.Move();
      },
      //移动
      Move: function() {
    clearTimeout(this._timer);
    //步长走完即到达目标坐标就返回
    if (this._steps.length <= 0) { this.Set(); return; }
    //执行移动
    this._obj.style.left = (parseInt(this._obj.style.left) + this._steps.shift()) + "px";
    //循环移动
    var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
      },
      //设置步长
      SetStep: function() {
    var iTemp = parseInt(this._obj.style.left);

    //注意是从大到小排的
    this._steps = [];

    if(this.Step >= 1){
    var i = 0;
    do{
    i = (this._xt - iTemp) / this.Step;
    //步长不能包含0
    if (i == 0) { break; } else if (Math.abs(i) < 1) { i = i > 0 ? 1 : -1; }
    this._steps.push(i = parseInt(i));
    iTemp += i;
    } while (true);
    //如果是加速的话反转步长集合
    if(this._fast) this._steps.reverse();
    }
    //加速减速是交替进行的所以每次都要取反
    this._fast = !this._fast;
      }
    };window.onload=function(){
    var o2 = new Bounce("sss", "ss", 250);
    $("bb").onclick = function(){ o2.Start(200); }
    $("idFast").onclick = function(){ if(--o2.Step<2){o2.Step=2} }
    $("idSlow").onclick = function(){ if(++o2.Step>20){o2.Step=20} }
    }
    </script>
    </head>
    <body>
    <style type="text/css">
    .container{border:1px solid #000000;height:50px; width:500px;}
    .bounce{width:10px; height:10px; background:#000000;top:20px;}
    </style>
    <div id='sss' style="height:30px; width:700px; border:1px solid #000000; padding:20px; ">
    <div id='ss' style="height:20px; width:20px; background-color:#000000; position:relative; "></div>
    <br /><br /><br />
    <input id="bb" name="" type="button" value=" 开始 " />
    <input id="idFast" name="" type="button" value=" 加速 + " />
    <input id="idSlow" name="" type="button" value=" 减速 - " />
    <br />
    </body>
    </html>
      

  6.   

    to 4楼额  步长本来就是1  在修改间隔时间 效果会比较差额！~
    to 5楼    别贴别人的代码啊  自己写写撒！
      

  7.   

    最简单 的用个递增或递减数列<div id='sss' style="height:30px; width:700px; border:1px solid #000000; padding:20px; ">
    <div id='ss' style="height:20px; width:20px; background-color:#000000; position:relative; "></div>
    </div>
    <script>
    var time = null;
    function $(Id){return document.getElementById(Id)};
    var n = 0;
    function move(){
        var distance =parseInt($('ss').style.left)||0;
    n = n + 1; // 增
        $('ss').style.left=distance + n;
        if(parseInt($('ss').style.left)>parseInt($('sss').offsetWidth)-60)
        clearTimeout(time)

    }
    time =setInterval(move,1)
    </script>
      

  8.   

    <body>
    <div style="height:30px; width:700px; border:1px solid #000000; padding:20px;">
    <div id='ss' style="height:20px; width:20px; background-color:#000000; position:relative;"></div>
    </div>
    <script>
    var time = null;
    function $(Id){return document.getElementById(Id)};
    function count(s,v1,v2){
     return [((v2-v1)*(v2+v1))/(2.0*s),2.0*(s/(v1+v2))]  
    }
    function distance(v,a,t){
      return v*t + 0.5*a*t*t;           
    }var v1 =10                 
    var v2 =0                  
    var s = document.all?640:680;
    var arg  = count(s,v1,v2);  
    var t = 0;
    function move(){
      $('ss').style.left=distance(v1,arg[0],t);
      t= t + 1.0;
      if(t>=arg[1]) clearTimeout(time);  
    }
    time =setInterval(move,1)
    </script>
    </body>
      

  9.   

    <body>
    <div style="height:30px; width:700px; border:1px solid #000000; padding:20px;">
    <div id='ss' style="height:20px; width:20px; background-color:#000000; position:relative;"></div>
    </div>
    <script>
    var time = null;
    function $(Id){return document.getElementById(Id)};
    function count(s,v1,v2){
     return [((v2-v1)*(v2+v1))/(2.0*s),2.0*(s/(v1+v2))]  
    }
    function distance(v,a,t){
      return v*t + 0.5*a*t*t;           
    }var v1 =10                
    var v2 =0                  
    var s = document.all?649:680;
    var arg  = count(s,v1,v2); 
    var t = 0;
    function move(){
      $('ss').style.left=distance(v1,arg[0],t);
      t= t + 1.0;
      if(t>=arg[1]) {clearTimeout(time);$('ss').style.left=distance(v1,arg[0],arg[1]);alert($('ss').style.left)} 
    }
    time =setInterval(move,1)
    </script>
    </body>
      

  10.   

    <body>
    <div id='jilu1'></div>
    <div id='jilu2'></div>
    <div id='s' style=" height:20px; width:20px; background-color:#000000; position:absolute;"></div>
    <div id='ss' style=" height:20px; width:20px; background-color:#000000; position:absolute; top:120"></div>
    <script>
    function $(Id){return document.getElementById(Id)}
    var div=$('s'),div1=$('ss');
    var Tween = {
        Quad: {
            easeOut: function(t,b,c,d){
                return -c *(t/=d)*(t-2) + b;
               
            },
            easeIn: function(t,b,c,d){
                return c*(t/=d)*t + b;
            }
        }
    };var b=0,c=567,d=70,t=0;
    function Run(){
        div.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px";
        $('jilu1').innerHTML = 'div1    '+div.style.left
        div1.style.left = Math.ceil(Tween.Quad.easeIn(t,b,c,d)) + "px";
        $('jilu2').innerHTML = 'div2    '+div.style.left
        if(t<d){ t++; setTimeout(Run, 10); }
    };
    Run();
    </script>
    </body>
      

  11.   

    <body>
    <div id='jilu1'></div>
    <div id='jilu2'></div>
    <div id='s' style=" height:20px; width:20px; background-color:#000000; position:absolute;"></div>
    <div id='ss' style=" height:20px; width:20px; background-color:#000000; position:absolute; top:120"></div>
    <script>
    function $(Id){return document.getElementById(Id)}
    var div=$('s'),div1=$('ss');
    var Tween = {
    Elastic: {
    easeOut: function(t,b,c,d,a,p){
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
    }
    },
    Bounce: {
    easeOut: function(t,b,c,d){
    if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
    }
    }
    };var b=0,c=567,d=150,t=0;
    function Run(){
        div.style.left = Math.ceil(Tween.Elastic.easeOut(t,b,c,d)) + "px";
        $('jilu1').innerHTML = 'div1    '+div.style.left
        div1.style.left = Math.ceil(Tween.Bounce.easeOut(t,b,c,d)) + "px";
        $('jilu2').innerHTML = 'div2    '+div.style.left
        if(t<d){ t++; setTimeout(Run, 10); }
    };
    Run();
    </script>
    </body>