描述：撞到目标点弹回来（速度反转）

一、无重力的漂浮div

var div1=document.getElementById("div1");

var iSpeedX=6;

var iSpeedY=8;

setInterval(function(){

    var l=div1.offsetLeft+iSpeedX;

    var t=div1.offsetTop+iSpeedY;

    if(t>=document.documentElement.clientHeight-div1.offsetHeight){

        iSpeedY*=-1;          //速度反向

        t=document.documentElement.clientHeight-div1.offsetHeight;    //超出下边界时，把它拉回到下边界，不然右边滚动条会闪动出现一下

    }

    else if(t<=0){

        iSpeedY*=-1;

        t=0;

    }

    if(l>=document.documentElement.clientWidth-div1.offsetWidth){

        iSpeedX*=-1;

        l=document.documentElement.clientWidth-div1.offsetWidthl;

    }

    else if(l<=0){

        iSpeedX*=-1;

        l=0;

    }   

    div1.style.left=l+'px';

    div1.style.top=t+'px';

},30);

二、碰撞+重力

 所谓重力就是Y轴的速度不断增加

setInterval(function(){

    iSpeedY+=3;

    var l=div1.offsetLeft+iSpeedX;

    var t=div1.offsetTop+iSpeedY;

    if(t>=document.documentElement.clientHeight-div1.offsetHeight){

        iSpeedY*=-0.8;   

        iSpeedX*=0.8;          //横向速度也要变慢，否则碰到地面时会停不下来

        t=document.documentElement.clientHeight-div1.offsetHeight;  

    }

    else if(t<=0){

        iSpeedY*=-1;

        iSpeedX*=0.8;

        t=0;

    }

    if(l>=document.documentElement.clientWidth-div1.offsetWidth){

        iSpeedX*=-0.8;

        l=document.documentElement.clientWidth-div1.offsetWidthl;

    }

    else if(l<=0){

        iSpeedX*=-0.8;

        l=0;

    }   

    if(Math.abs(iSpeedX)<1){       //解决小数的问题，因为假如速度是小数，正的没问题，100(iSpeed=0.5)-->100.5-->100，负的100(iSpeed=-0.5)--->99.5-->99，可能会出现

                                                  x轴反向时滑行

        iSpeedX=0;

    }

    if(Math.abs(iSpeedY)<1){

        iSpeedY=0;

    }

    div1.style.left=l+'px';   

    div1.style.top=t+'px';

},30);

三、碰撞+重力+拖拽

window.οnlοad=function ()

{

    var oDiv=document.getElementById('div1');  

    var lastX=0;

    var lastY=0;  

    oDiv.οnmοusedοwn=function (ev)

    {

        var oEvent=ev||event;     

        var disX=oEvent.clientX-oDiv.offsetLeft;

        var disY=oEvent.clientY-oDiv.offsetTop;    

        document.οnmοusemοve=function (ev)

        {

            var oEvent=ev||event;        

            var l=oEvent.clientX-disX;

            var t=oEvent.clientY-disY;      

            oDiv.style.left=l+'px';

            oDiv.style.top=t+'px';       

            iSpeedX=l-lastX;            //拖拽结束时的速度

            iSpeedY=t-lastY;          

            lastX=l;          //更新上一个点的位置

            lastY=t;        

        };      

        document.οnmοuseup=function ()

        {

            document.οnmοusemοve=null;

            document.οnmοuseup=null;         

            startMove();   //拖拽结束时执行

        };       

        clearInterval(timer);

    };

};

var timer=null;

var iSpeedX=0;

var iSpeedY=0;

function startMove()

{

    clearInterval(timer);  

    timer=setInterval(function (){

        var oDiv=document.getElementById('div1');     

        iSpeedY+=3;      

        var l=oDiv.offsetLeft+iSpeedX;

        var t=oDiv.offsetTop+iSpeedY;      

        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)

        {

            iSpeedY*=-0.8;

            iSpeedX*=0.8;

            t=document.documentElement.clientHeight-oDiv.offsetHeight;

        }

        else if(t<=0)

        {

            iSpeedY*=-1;

            iSpeedX*=0.8;

            t=0;

        }     

        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)

        {

            iSpeedX*=-0.8;

            l=document.documentElement.clientWidth-oDiv.offsetWidth;

        }

        else if(l<=0)

        {

            iSpeedX*=-0.8;

            l=0;

        }       

        if(Math.abs(iSpeedX)<1)

        {

            iSpeedX=0;

        }       

        if(Math.abs(iSpeedY)<1)

        {

            iSpeedY=0;

        }       

        if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)

        {

            clearInterval(timer);

        }

        else

        {

            oDiv.style.left=l+'px';

            oDiv.style.top=t+'px';

        }       

        document.title=iSpeedX;

    }, 30);

}