offset三大家族 注意和offsetX的区别

和dom元素有关

        //offsetParent
        //offsetLeft,offsetTop
        //offsetWidth offsetHeight

坐标点和event有关

        //offsetX,offsetY
        //clientX,clientY
        //pageX,pageY
        //screenX,screenY

1. offsetParent

        //offsetParent 找带有定位(position)的父元素,如果父级们,都没有
        //默认是body
        //parentNode,parentElement 找父亲

2. offsetLeft

        //到带有定位的父元素的距离

3.offsetWidth

        //获取自己盒子的大小
        //自身的大小加padding水平加border水平

封装一个函数.自动计算到body的offsetLeft,包括中间任何带有定位的元素!

//封装一个,不用管中间有多少个被定位的元素,可以算出
        //一个元素到body的距离
        function offset(o){
            var obj={
                left:o.offsetLeft,
                top:o.offsetTop
            }
            while(o.offsetParent){
                            //是否还有定位的父元素,如果有,则继续执行,
                              //body的offsetparent为null在while中返回false
            o=o.offsetParent;//易主
                obj.left+=o.offsetLeft;
                obj.top=o.offsetTop;
            }
            return obj;
        }

滑动解锁案例

CSS部分

     <style>
   #iphone_box {
        background: url("./iPhone/iphone.jpg");
        width: 426px;
        height: 640px;
        margin: 10px auto;
        position: relative;
        border: 1px solid #000;
    }

    #lock_box {
        width: 360px;
        height: 66px;
        position: absolute;
        left: 34px;
        top: 545px;
        /* background: green; */
    }

    #lock {
        background: url(./iPhone/unlock_btn.jpg);
        width: 93px;
        height: 62px;
        position: absolute;
        left: 0px;
        top: 0;
        cursor: pointer;
    }
</style>

HTML部分

<div id="iphone_box">
    <div id="lock_box">
        <div id="lock"></div>
    </div>

JS部分

 <script>
    //封装一个函数
    function offset(o) {
        var obj = {
            left: o.offsetLeft,
            top: o.offsetTop
        }
        while (o.offsetParent) {
            o = o.offsetParent;
            obj.left += o.offsetLeft;
            obj.top += o.offsetTop;
        }
        return obj;
    }
   
    var oScreen=document.querySelector("#iphone_box")
    var oLockBox = document.querySelector("#lock_box");
    var oLock = document.querySelector("#lock");
    
    oLock.onmousedown = function (evt) {
        var e = evt || window.event;
        var disX = e.offsetX;//鼠标距离oLock左侧的距离

        //移动事件
        document.onmousemove = function (evt) {
            var e = evt || window.event;

            //鼠标在解锁条上的活动距离,到达最大最小距离时,直接写死
            var mX = e.pageX - disX - offset(oLockBox).left;
            //最小活动范围
            if (mX <= 0) {
                mX = 0;
            }
            //最大活动范围
            if(mX>=oLockBox.offsetWidth-oLock.offsetWidth){
                mX=oLockBox.offsetWidth-oLock.offsetWidth;
                //到达最右边停止
            }
            oLock.style.left=mX+"px";
            if( oLock.style.left>=oLockBox.offsetWidth-oLock.offsetWidth){
            oScreen.style.background="url('./iPhone/iphone2.jpg')";
        }
        }
        //松开事件,分为前半部分分开,和后半部分分开两种情况
        document.onmouseup=function(){
            //中间值
            var middleVal=(oLockBox.offsetWidth-oLock.offsetWidth)/2
            var moveLeft=oLock.offsetLeft;//移动的值
            //大于中间值的情况,直接到最右边
            if(moveLeft>middleVal){
                moveLeft=(oLockBox.offsetWidth-oLock.offsetWidth);

            }else{
                moveLeft=0;
            }
            oLock.style.left=moveLeft+"px";
            if( oLock.style.left>=oLockBox.offsetWidth-oLock.offsetWidth){
            oScreen.style.background="url('./iPhone/iphone2.jpg')";
        }
            document.onmousemove=document.onmouseup=null;
        }
        
    }

</script>