弹性球

本文实现JS原生弹性球

创造一个球先

HTML

<div class="ball"></div>    

CSS

<style>
    div{
        width:100px;
        height:100px;
        position: absolute;
        bottom:0;
        left:200px;
        background: url(img/ball.png) no-repeat;
    }
</style>

球球创建好了呢，如下：

JS实现

获取元素，初始化设置

var ball = document.querySelector(".ball");

添加移除事件兼容性处理

function addHandler(element,type,handler){
    if(element.addEventListener){//检测是否为DOM2级方法
        element.addEventListener(type, handler, false);
    }else if (element.attachEvent){//检测是否为IE级方法
        element.attachEvent("on" + type, handler);
    } else {//检测是否为DOM0级方法
        element["on" + type] = handler;
    }
}
function removeHandler(element, type, handler){
    if (element.removeEventListener){
        element.removeEventListener(type, handler, false);
    } else if (element.detachEvent){
        element.detachEvent("on" + type, handler);
    } else {
        element["on" + type] = null;
    }
}         

封装函数
​
function gravBall(obj){
var timer = null;
var speedX =0, speedY=0,x=0,y=0;
var gapX =0, gapY=0;

    // obj.onmousedown = down;
    addHandler(obj,'mousedown',down);
    addHandler(obj,'mouseup',up);

    function down(ev){           
        clearInterval(timer); 
        var ev = ev || window.event;
        gapX = ev.clientX - obj.offsetLeft;
        gapY = ev.clientY - obj.offsetTop;
        addHandler(document,'mousemove',move);    
    }
    function up(){
        var currentX=0,currentY=0,l=0,t=0;
        removeHandler(document,'mousemove',move)
        clearInterval(timer); 
        timer = setInterval(function(){
            speedY +=3;  //一直有一个Y方向的增加，仿重力
            currentX = window.innerWidth - obj.offsetWidth;
            currentY = window.innerHeight - obj.offsetHeight;
            l = obj.offsetLeft + speedX;
            t = obj.offsetTop + speedY;
            //speedY +=3;  //放在这里就是先判断再+3，根本停不下来
            if(l > currentX){
                speedX *= -0.8;
                l =currentX;
            }
            if(l < 0){
                speedX *= -0.8;
                l = 0;
            }
            if(t > currentY){
                speedY *= -0.8;
                speedX *= 0.8;
                t = currentY;
            }
            if(t < 0){
                speedY *= -0.8;
                speedX *= 0.8;
                t = 0;
            }
            if( Math.abs(t-currentY)<1 && Math.abs(speedY)<1.5 && Math.abs(speedX)<1.5){
                clearInterval(timer);
            }
            obj.style.left = l  + "px";
            obj.style.top = t  + "px";
        },30)
    }

    function move(ev){
        var ev = ev || window.event;
        //难点一，记录当前速度 是最后一次的offsetLeft减去上一次的offsetLeft
        speedX = ev.clientX - x - gapX;
        speedY = ev.clientY - y - gapY;
        //记录本次的offsetLeft作为下一次移动的的上一次的offsetLeft；
        x = obj.offsetLeft;
        y = obj.offsetTop;
        var evX = ev.clientX;
        var evY = ev.clientY;
        if(ev.clientX<gapX || ev.clientX>window.innerWidth-gapX || ev.clientY<0 || ev.clientY>window.innerHeight){
            up();
        }
        obj.style.left = evX - gapX  + "px";
        obj.style.top = evY - gapY  + "px";
    }
}

OVER