js初識(shí)第十一節(jié)

offsetParent和offsetLeft的認(rèn)識(shí)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

    * {

    padding: 0;

    margin: 0;

    }

    .box1 {

    width: 400px;

    height: 400px;

    border: 10px solid red;

    padding: 50px;

    /*position: relative;*/

    }

    .box2 {

    width: 260px;

    height: 260px;

    border: 10px solid green;

    padding: 50px;

    /*position: relative;*/

    }

    .box3 {

    width: 160px;

    height: 160px;

    border: 10px solid blue;

    padding: 50px;

    position: relative;

    }

    p {

    width: 80px;

    height: 80px;

    border: 20px solid purple;

    /*position:fixed;*/

    /*position:absolute;*/

    /*position:relative;*/

    }

</style>

</head>

<body>

<div class="box1">

<div class="box2">

<div class="box3">

<p id="op"></p>

</div>

</div>

</div>

<script type="text/javascript">

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

    //alert(op.offsetParent); // body

    console.log(op.offsetParent);

    console.log(op.offsetLeft);

</script>

</body>

</html>

<!-- offsetParent就是距離該子元素最近的進(jìn)行過(guò)定位的父元素（position：absolute  relative fixed），如果其父元素中不存在定位則offsetParent為：body元素 -->

<!-- 元素自身有fixed定位，父元素?zé)o論是否存在定位，則offsetParent的結(jié)果為null（firefox中為：body，其他瀏覽器返回為null） -->

<!-- 元素自身無(wú)fixed定位，且父元素也不存在定位，offsetParent為<body>元素 -->

<!-- 元素自身有relative/absolute定位，父元素不存在定位，則offsetParent的結(jié)果為body -->

<!-- 元素自身無(wú)定位，且父元素存在定位，offsetParent為離自身最近且經(jīng)過(guò)定位的父元素 -->

<!-- <body>元素的offsetParent是null -->

<!-- offsetLeft: 獲取的是當(dāng)前非fixed定位對(duì)象左側(cè)距離offsetParent左側(cè)的值(均不包含border); -->

<!-- 當(dāng)元素定位為fixed的，offsetLeft是當(dāng)前對(duì)象距離body左側(cè)的值 -->

scrollTop的認(rèn)識(shí)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

    body {

    height: 2000px;

    }

</style>

</head>

<body>

<script type="text/javascript">

      //監(jiān)聽(tīng)滾動(dòng)條的滾動(dòng)事件

        window.onscroll = function() {

            console.log(document.documentElement.scrollTop);

            console.log(document.body.scrollTop);

            var scrollTop = document.documentElement.scrollTop || doucument.body.scrollTop;

            // 獲取滾動(dòng)條距離頂部的高度的兼容性寫(xiě)法

            console.log(scrollTop);

          }

</script>

</body>

</html>

模擬滾動(dòng)條的實(shí)例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box {

            width: 300px;

            height: 500px;

            border: 1px solid red;

            margin:100px;

            position: relative;

        }

        .content {

            height: auto;

            padding: 5px 18px 5px 5px;

            position: absolute;

            top: 0;

            left: 0;

        }

        .scroll {

            width: 18px;

            height: 100%;

            position: absolute;

            top: 0;

            right: 0;

            background-color: #eee;

        }

        .bar {

            width: 100%;

            height: 100px;

            background-color: red;

            cursor: pointer;

            border-radius: 10px;

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

<div class="box" id="box"><!--內(nèi)容可視區(qū)-->

    <div id="content" class="content" ><!--內(nèi)容區(qū)-->

    你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的

小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你

是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小

蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果

你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的

小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你

是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小

蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果

你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的

小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你

是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小

蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果

你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的

小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你

是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小

蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果

你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的

小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你

是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小

蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果你是我的小蘋(píng)果

    </div>

    <div id="scroll" class="scroll"><!--滾動(dòng)條所在區(qū)域-->

        <div id="bar" class="bar"></div><!--滾動(dòng)條-->

    </div>

</div>

<script type="text/javascript">

      function $(id) {

            return document.getElementById(id);

      }

      var box  = $('box');

      var content = $('content');

      var bar = $('bar');

      bar.onmousedown = function(e){

        var e = e||event;

        var dis = e.offsetY + box.offsetTop;//鼠標(biāo)在滾動(dòng)滑塊按下時(shí)記錄下一個(gè)距離;

        document.onmousemove = function(e){

          var e = e||event;

          var y = e.pageY - dis;//鼠標(biāo)向下滑動(dòng)時(shí)記錄y坐標(biāo)

          var maxT = box.offsetHeight - bar.offsetHeight;

          if(y<0){

            y=0

          }else if(y>maxT){

            y = maxT;

          }

          bar.style.top = y+'px';//讓滑塊移動(dòng)兩者之間的高差

          var t = content.offsetHeight - box.offsetHeight;

          content.style.top = -t*(y/maxT) + 'px';//當(dāng)y=maxT時(shí)，恰好滾動(dòng)條到底部而且內(nèi)容展示完全

        }

        document.onmouseup = function(e){

          document.onmousemove = null;

        }

        return false;

      }

      //為了改善拖動(dòng)的流暢性這里不是為bar添加的onmousemove事件，而是為document添加的

      // offsetTop 它返回當(dāng)前元素頂部相對(duì)指定元素頂部的偏移量,這個(gè)指定元素由當(dāng)前元素的offsetParent屬性確定 ,類比 offsetLeft

      // offsetHeight  返回元素的高度

      // offsetWidth    返回元素的寬度   

</script>

</body>

</html>

模擬進(jìn)度條的實(shí)現(xiàn)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

  .progress {

    margin: auto;

    width: 200px;

    height: 20px;

    border: thin dotted darkgreen;

    position: relative;

    top: 200px;

  }

  .fillDiv {

    position: absolute;

    left: 0;

    top: 0;

    width: 0px;

    height: 20px;

    background-color: green;

  }

  #percent {

    position: absolute;

    left: 206px;

    top: 0;

  }

</style>

</head>

<body>

<div class="progress" id="progress">

<div class="fillDiv" id="fillDiv"></div>

<span id="percent">0</span>

</div>

    <script type="text/javascript">

      //Element.clientWidth 屬性表示元素的內(nèi)部寬度，以像素計(jì)。該屬性包括內(nèi)邊距，但不包括垂直滾動(dòng)條（如果有）、邊框和外邊距。

      function $(id){

      return document.getElementById(id);

      }

      var progress = $('progress').clientWidth;//獲取外層div的寬度

      var fillDiv = $('fillDiv');

      var span = $('percent');

      var timer = setInterval(function(){

          fillDiv.style.width = fillDiv.clientWidth + 2 + 'px';

      var percent = parseInt((fillDiv.clientWidth)/progress*100)+'%';

      span.innerText = percent;

      if(fillDiv.clientWidth == 200){

      clearInterval(timer);

      }

      },10);

    </script>

</body>

</html>

小火箭重回頂部的實(shí)現(xiàn)

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body {

            height: 2000px;

        }

      .top{

          position: fixed;

          right:50px;

          bottom:100px;

          display: none;

      }

    </style>





</head>

<body>

<div id="gotop" class="top">

    <img src="images/Top.jpg" alt=""/>

</div>

<p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

  <p>天王蓋地虎，小雞燉蘑菇</p>

</body>

</html>

<script type="text/javascript">

  var gt = document.querySelector("#gotop");

    onscroll = function() {

        // 獲取頁(yè)面被卷的距離

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        if (scrollTop > 0) {

              gt.style.display = "block";

        } else {

              gt.style.display = "none";

        }

    }

    gt.onclick =  function() {

          if (document.documentElement) {

              document.documentElement.scrollTop = 0;

              return;

          }

          document.body.scrollTop = 0;

    }

</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容