js篇--学习web-api第六天（js三大系列）_js web api还有必要学-CSDN博客

本文链接：https://blog.csdn.net/weixin_42603991/article/details/100145831

三大系列

offset系列

1.offsetLeft: 用于获取元素到最近的定位父级盒子的左侧的距离

计算方式：当前元素的左边框的左侧到定位父级盒子的左边框的右侧

如果父级盒子没有定位，那么接着往上找有定位的盒子，若都没有，则最后距离是与body的left值。

元素名.offsetLeft——我们看见的值，window.getComputedStyle（元素名，null）.left——真实设置的值
2、offsetTop: 用于获取元素到最近定位盒子的顶部距离
计算方式：当前元素的上边框到定位父级盒子的上边框下侧
如果父级盒子没有定位，那么接着找有定位的盒子，若都没有，则最后距离是与body的top值。

3、offsetWidth：用于获取元素的真实宽度（包括border）

4、offsetHeight：用于获取元素的真实高度(包括border)

5、offsetParent：用于获取该元素中有定位的最近父级元素
若当前元素的父级元素都没有定位，则offsetParent为body。

scroll系列

1、scrollHeight： 元素中内容的实际高度(不包括border)
若内容不足，就是元素的高度

2、scrollWidth： 元素中内容的实际宽度（不包括border）
若内容不足，就是元素的宽度

3、scrollTop： onscroll事件发生时，元素向上卷曲出去的距离

4、scrollLeft： onscroll事件发生时，元素向左卷曲出去的距离

 //兼容代码--获取浏览器向上或向左卷曲出去的距离的值
    function getScroll() {
       return{
           left:window.pageXOffset||document.documentElement.scrollLeft||
                   document.body.scrollLeft||0,
           top:window.pageYOffset||document.documentElement.scrollTop||
                   document.body.scrollTop||0
       };
    }

案例–固定导航栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    img {
      vertical-align: top;
    }

    .main {
      margin: 0 auto;
      width: 1000px;
      margin-top: 10px;

    }

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<div class="top" id="topPart">
  <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
  <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
  <img src="images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>
  //获取页面向上或者向左卷曲出去的距离的值
  function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
  }

  //滚动事件
  window.onscroll=function () {
    //向上卷曲出去的距离和最上面的div的高度对比
    if(getScroll().top>=my$("topPart").offsetHeight){
      //设置第二个div的类样式
     my$("navBar").className="nav fixed";
      //设置第三个div的marginTop的值
      my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";
    }else{
      my$("navBar").className="nav";
      my$("mainPart").style.marginTop="10px";
    }
  };

</body>
</html>

client系列

1、clientWidth： 获取元素可视区域的宽度

2、clientHeight： 获取元素可视区域的高度

3、clientLeft： 获取左边框的宽度

4、clientTop： 获取上边框的宽度

5、clientX： 获取鼠标事件发生时的应用客户端区域的水平坐标

6、clientY： 获取鼠标事件发生时的应用客户端区域的垂直坐标

封装动画函数

1.匀速动画函数

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
  <script src="common.js"></script>
  <script>
    //点击按钮移动div

    my$("btn1").onclick = function () {
      animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
      animate(my$("dv"), 800);
    };

    //匀速动画
    function animate(element, target) {
      //清理定时器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = 10;
        step = target > current ? step : -step;
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
          element.style.left = current + "px";
        } else {
          clearInterval(element.timeId);
          element.style.left = target + "px";
        }
      }, 20);
    }
  </script>
</div>
</body>
</html>

测试结果

在这里插入图片描述

2.变速（缓动）动画函数

第一个版本代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
  <script src="common.js"></script>
  <script>
    //点击按钮移动div

    my$("btn1").onclick = function () {
      animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
      animate(my$("dv"), 800);
    };

    //匀速动画
    function animate(element, target) {
      //清理定时器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = (target-current)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        element.style.left = current + "px";
        if(current==target) {
          //清理定时器
          clearInterval(element.timeId);
        }
        //测试代码:
        console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
      }, 20);
    }
  </script>
</div>
</body>
</html>

测试结果

在这里插入图片描述

筋斗云案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    body {
      background-color: #333;
    }

    .nav {
      width: 800px;
      height: 42px;
      margin: 100px auto;
      background: url(images/rss.png) right center no-repeat;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
    }

    .nav li {
      width: 83px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      float: left;
      cursor: pointer;
    }

    .nav span {
      position: absolute;
      top: 0;
      left: 0;
      width: 83px;
      height: 42px;
      background: url(images/cloud.gif) no-repeat;
    }

    ul {
      position: relative;
    }
  </style>
</head>
<body>
<div class="nav">
  <span id="cloud"></span>
  <ul id="navBar">
    <li>北京校区</li>
    <li>上海校区</li>
    <li>广州校区</li>
    <li>深圳校区</li>
    <li>武汉校区</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>招贤纳士</li>
  </ul>
</div>
<script src="common.js"></script>
<script>
  //匀速动画
  function animate(element, target) {
    //清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
      //获取元素的当前位置
      var current = element.offsetLeft;
      //移动的步数
      var step = (target - current) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      current += step;
      element.style.left = current + "px";
      if (current == target) {
        //清理定时器
        clearInterval(element.timeId);
      }
      //测试代码:
      console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);
    }, 20);
  }


  //获取云彩
  var cloud = my$("cloud");
  //获取所有的li标签
  var list = my$("navBar").children;
  //循环遍历分别注册鼠标进入,鼠标离开,点击事件
  for (var i = 0; i < list.length; i++) {
    //鼠标进入事件
    list[i].onmouseover = mouseoverHandle;
    //点击事件
    list[i].onclick = clickHandle;
    //鼠标离开事件
    list[i].onmouseout = mouseoutHandle;
  }
  function mouseoverHandle() {//进入
    //移动到鼠标此次进入的li的位置
    animate(cloud, this.offsetLeft);
  }
  //点击的时候,记录此次点击的位置
  var lastPosition = 0;
  function clickHandle() {//点击
    lastPosition = this.offsetLeft;
  }
  function mouseoutHandle() {//离开
    animate(cloud, lastPosition);
  }
</script>
</body>
</html>

获取任元素计算后样式属性的值

 function getStyle(element,attr) {
    //判断浏览器是否支持这个方法
   return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
  }

第二个版本–增加任意多个属性和回调函数及层级还有透明度

运行结果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {

      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }

    input {
      z-index: 10;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
  //点击按钮,改变宽度到达一个目标值,高度到达一个目标值

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }


  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[attr];
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current + "px";
        }
        //是否到达目标
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);
  }


  //zIndex:1000
  //透明度: 数字类型----小数---放大100倍
  my$("btn1").onclick = function () {

    var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
    animate(my$("dv"), json1, function () {
      animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
    });
  };

</script>
</body>
</html>

手风琴案例

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>

    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
    }

    div ul {
      width: 1300px;
    }


  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="common.js"></script>
<script>

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }
  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[attr];
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current + "px";
        }
        //是否到达目标
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);
  }

  //先获取所有的li标签
  var list = my$("box").getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
    //鼠标进入
    list[i].onmouseover = mouseoverHandle;
    //鼠标离开
    list[i].onmouseout = mouseoutHandle;
  }
  //进入
  function mouseoverHandle() {
    for (var j = 0; j < list.length; j++) {
      animate(list[j], {"width": 100});//动画效果
    }
    animate(this, {"width": 800});
  }
  //离开
  function mouseoutHandle() {
    for (var j = 0; j < list.length; j++) {
      animate(list[j], {"width": 240});//动画效果
    }
  }


</script>

</body>
</html>

关机动画案例

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box {
      width: 322px;
      position: fixed;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }

    span {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <span id="closeButton"></span>
  <div class="hd" id="headPart">
    <img src="images/t.jpg" alt=""/>
  </div>
  <div class="bd" id="bottomPart">
    <img src="images/b.jpg" alt=""/>
  </div>
</div>
<script src="common.js"></script>
<script>

  my$("closeButton").onclick=function () {
    //设置最下面的div的高渐渐的变成0
    animate(my$("bottomPart"),{"height":0},function () {
      animate(my$("box"),{"width":0});
    });
  };

</script>
</body>
</html>

common.js

//根据id获取对应的元素
function my$(id) {
    return document.getElementById(id);
}
/*
* element---任意的元素
* attr---属性
* */
function getAttrValue(element,attr) {
    return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
}


/*
* 终极版本的动画函数---有bug
*
* */
function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//假设都达到了目标
        for(var attr in json){
            if(attr=="opacity"){//判断属性是不是opacity
                var current= getAttrValue(element,attr)*100;
                //每次移动多少步
                var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current/100;
            }else if(attr=="zIndex"){//判断属性是不是zIndex
                element.style[attr]=json[attr];
            }else{//普通的属性

                //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
                var current= parseInt(getAttrValue(element,attr))||0;
                //每次移动多少步
                var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current+"px";
            }
            if(current!=target){
                flag=false;//如果没到目标结果就为false
            }
        }
        if(flag){//结果为true
            clearInterval(element.timeId);
            if(fn){//如果用户传入了回调的函数
                fn(); //就直接的调用,
            }
        }
        console.log("target:"+target+"current:"+current+"step:"+step);
    },10);
}

旋转木马轮播图案例

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/css.css"/>
  <script src="common.js"></script>
  <script>
    //
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },//0
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },//1
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },//2
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },//3
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      }//4

    ];

    //页面加载的事件
    window.onload = function () {
      var flag=true;//假设所有的动画执行完毕了---锁====================================================
      var list = my$("slide").getElementsByTagName("li");
      //1---图片散开
      function assign() {
        for (var i = 0; i < list.length; i++) {
          //设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置
          animate(list[i], config[i],function () {
            flag=true;//===============================================
          });
        }
      }
      assign();
      //右边按钮
      my$("arrRight").onclick = function () {
        if(flag){//==========================================================
          flag=false;
          config.push(config.shift());
          assign();//重新分配
        }

      };
      //左边按钮
      my$("arrLeft").onclick = function () {
        if(flag){//==================================================
          flag=false;
          config.unshift(config.pop());
          assign();
        }

      };
      //鼠标进入,左右焦点的div显示
      my$("slide").onmouseover = function () {
        animate(my$("arrow"), {"opacity": 1});
      };
      //鼠标离开,左右焦点的div隐藏
      my$("slide").onmouseout = function () {
        animate(my$("arrow"), {"opacity": 0});
      };
    };
  </script>

</head>
<body>
<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ul>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrLeft"></a>
      <a href="javascript:;" class="next" id="arrRight"></a>
    </div>
  </div>
</div>

</body>
</html>

css.css

@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}