js初识第十一节

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

js初识第十一节
JS初识
## JS初识
js初识第一节
js初识第十二节
Python小白学习进行时---js基础（2018-7-13）
js初识
JS初识
初识JS
初识JS

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的认识模拟滚动条的实例模拟进度条的实现...
JS初识
初识javascript 引导主要内容：学习目标：节数知识点要求第一节（js的前世今生）js简介了解第二...
## JS初识
## JS初识 # js初识 # js注释 # 变量 # 变量的命名 JS数值的类型 # Number类型 # S...
js初识第一节
一、 js的组成(javascript) js的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象...
js初识第十二节
div移动和发射子弹的案例固定导航栏的案例放大镜案例一个无缝滚动的案例
Python小白学习进行时---js基础（2018-7-13）
一、JS初识二、JS语法三、运算符四、分支结构 ==============================...
js初识
js核心：ECMAScript——ES：基础语法DOM:文档对象模型BOM：浏览器对象模型 js特点:（1）脚本语...
JS初识
js是脚本语言一种简单弱类型语言一种解释性执行的脚本语言一种基于对象的脚本语言一种相对安全的脚本语言一种...
初识JS
1.CSS和JS在网页中的放置顺序是怎样的？ css使用link标签引入并放在head标签内，是为了防止白屏和FO...
初识JS
CSS和JS在网页中的放置顺序是怎样的？ css是使用link的标签进行引入并放置在header标签内,而js是使...

js初识第十一节

offsetParent和offsetLeft的认识

scrollTop的认识

模拟滚动条的实例

模拟进度条的实现

小火箭重回顶部的实现

相关文章

js初识第十一节

JS初识

## JS初识

js初识第一节

js初识第十二节

Python小白学习进行时---js基础（2018-7-13）

js初识

JS初识

初识JS

初识JS

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读