offset三大家族 注意和offsetX的區(qū)別

和dom元素有關(guān)

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

坐標點和event有關(guān)

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

1. offsetParent

        //offsetParent 找?guī)в卸ㄎ?position)的父元素,如果父級們,都沒有
        //默認是body
        //parentNode,parentElement 找父親

2. offsetLeft

        //到帶有定位的父元素的距離

3.offsetWidth

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

封裝一個函數(shù).自動計算到body的offsetLeft,包括中間任何帶有定位的元素!

//封裝一個,不用管中間有多少個被定位的元素,可以算出
        //一個元素到body的距離
        function offset(o){
            var obj={
                left:o.offsetLeft,
                top:o.offsetTop
            }
            while(o.offsetParent){
                            //是否還有定位的父元素,如果有,則繼續(xù)執(zhí)行,
                              //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>
    //封裝一個函數(shù)
    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左側(cè)的距離

        //移動事件
        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>