js初识第十一节

作者: An的杂货铺 | 来源:发表于2019-08-22 10:14 被阅读0次

offsetParent和offsetLeft的认识

<!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就是距离该子元素最近的进行过定位的父元素（position：absolute  relative fixed），如果其父元素中不存在定位则offsetParent为：body元素 -->

<!-- 元素自身有fixed定位，父元素无论是否存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null） -->

<!-- 元素自身无fixed定位，且父元素也不存在定位，offsetParent为<body>元素 -->

<!-- 元素自身有relative/absolute定位，父元素不存在定位，则offsetParent的结果为body -->

<!-- 元素自身无定位，且父元素存在定位，offsetParent为离自身最近且经过定位的父元素 -->

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

<!-- offsetLeft: 获取的是当前非fixed定位对象左侧距离offsetParent左侧的值(均不包含border); -->

<!-- 当元素定位为fixed的，offsetLeft是当前对象距离body左侧的值 -->

scrollTop的认识

<!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">

      //监听滚动条的滚动事件

        window.onscroll = function() {

            console.log(document.documentElement.scrollTop);

            console.log(document.body.scrollTop);

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

            // 获取滚动条距离顶部的高度的兼容性写法

            console.log(scrollTop);

          }

</script>

</body>

</html>

模拟滚动条的实例

<!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"><!--内容可视区-->

    <div id="content" class="content" ><!--内容区-->

    你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的

小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你

是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小

苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果

你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的

小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你

是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小

苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果

你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的

小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你

是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小

苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果

你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的

小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你

是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小

苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果

你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的

小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你

是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小

苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果

    </div>

    <div id="scroll" class="scroll"><!--滚动条所在区域-->

        <div id="bar" class="bar"></div><!--滚动条-->

    </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;//鼠标在滚动滑块按下时记录下一个距离;

        document.onmousemove = function(e){

          var e = e||event;

          var y = e.pageY - dis;//鼠标向下滑动时记录y坐标

          var maxT = box.offsetHeight - bar.offsetHeight;

          if(y<0){

            y=0

          }else if(y>maxT){

            y = maxT;

          }

          bar.style.top = y+'px';//让滑块移动两者之间的高差

          var t = content.offsetHeight - box.offsetHeight;

          content.style.top = -t*(y/maxT) + 'px';//当y=maxT时，恰好滚动条到底部而且内容展示完全

        }

        document.onmouseup = function(e){

          document.onmousemove = null;

        }

        return false;

      }

      //为了改善拖动的流畅性这里不是为bar添加的onmousemove事件，而是为document添加的

      // offsetTop 它返回当前元素顶部相对指定元素顶部的偏移量,这个指定元素由当前元素的offsetParent属性确定 ,类比 offsetLeft

      // offsetHeight  返回元素的高度

      // offsetWidth    返回元素的宽度   

</script>

</body>

</html>

模拟进度条的实现

<!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 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

      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>

小火箭重回顶部的实现

<!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() {

        // 获取页面被卷的距离

        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>

js初识第十一节

offsetParent和offsetLeft的认识

scrollTop的认识

模拟滚动条的实例

模拟进度条的实现

小火箭重回顶部的实现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读