小球随鼠标移动

html:
<div id="box"></div>
css:
 div{
            width:150px;
            height:150px;
            background:green;
            border-radius:50%;
            position:absolute;
}
js:
window.onload = function(){
/*
分析：
    有三个事件；
        1.鼠标按下事件；
            分析：鼠标按下的时候，点击的点与圆圈的边缘的距离是固定不变的，因为圆球随鼠标移动的时候，点不动，只是圆球移动 所以我们在鼠标按下的时候获取这段距离就可以得到left的距离了
            1.获取鼠标的e.clientX和e.clientY的值；
            2.offsetX = e.clientX-this.offsetLeft;
              offsetY = e.clientY-this.offsetTop;
            3.因为考虑到鼠标抬起的时候，按下的不会被关闭  var isDown = false;
        2.鼠标移动事件；
            1.鼠标移动的时候改变的有e.clientX和
            2.我们要求的就是left的距离   = e.client- offsetX；
            3.还要判断 不能超过左右上下两边；
                右边的最大范围：整个屏幕的宽-小球的宽
                下边的最大范围是：整个屏幕的高-小球的高；
            4.鼠标移动的时候要判断是否处于点击事件；


        3.鼠标抬起事件
        关闭鼠标按下事件；
        鼠标样式回原样
*/
//获取元素；
    var ball = document.getElementById("box");
    var offsetX;
    var offsetY;
    var isDown = false;  //这步的作用是在鼠标移动那部用到的，要是没有这个鼠标再次放到小球上的时候就不知道是不是处于鼠标按下状态；
//鼠标按下事件；
    ball.onmousedown = function(e){
        var e = e || window.event;
        offsetX = e.clientX-this.offsetLeft;
        offsetY = e.clientY-this.offsetTop;
        this.style.cursor = "move";
        isDown = true;
    }
//    鼠标移动事件；
    window.onmousemove = function(e){
        if(!isDown){
            return;
        }
        var e = e || window.event;
        var newLeft = e.clientX-offsetX;
        var newTop = e.clientY-offsetY;
        var maxLeft = document.documentElement.clientWidth-ball.offsetWidth;
        var maxTop = document.documentElement.clientHeight-ball.offsetHeight;
        if(newLeft>=maxLeft){
            newLeft = maxLeft
        }
        if(newLeft<=0){
            newLeft = 0;
        }
        if(newTop>=maxTop){
            newTop = maxTop;
        }
        if(newTop<=0){
            newTop = 0;
        }
        ball.style.left = newLeft + "px";
        ball.style.top = newTop + "px";
    }
    window.onmouseup = function(){
        ball.style.cursor = "default";
        isDown = false;
    }
}