LC

JS-运动

 
  • 2021年 02月11日
  • 0 阅读

运动

一，轮播图

1，简单轮播封装

function animatedMoveX(element, target) {
  //移动的元素 目标位置
  //先要将原本的定时器清除
  clearInterval(element.timer);
  element.timer = setInterval(() => {
    //element.timer防止名字冲突
    // 3.获取他本身的位置偏移left的位置
    var currntX = element.offsetLeft; //当前的偏移位置
    //判断当前移动应该是从左到右还是从右到左
    var d = currntX > target ? -10 : 10;
    // 4.进行累加操作
    element.style.left = currntX + d + "px";
    // 5.判断是否到达某个位置结束
    //判断当前位置是否是对应区间的值 用目标位置减去上一次对应的偏移位置得到的结果应该小于等于对应一次距离
    if (Math.abs(target - currntX) <= Math.abs(d)) {
      element.style.left = target + "px"; //到达目的坐标的时候 设置目标值
      clearInterval(element.timer);
    }
  }, 0);
}

1.1，自动轮播

将轮播函数放入定时器即可；

1.2，左右切换

需要计算到顶端和到末端的变化，设置两个 if 判断，判断左右区间；

二，缓冲动画

2.1，公式

​ 步长=（目标位置 - 当前位置） / 10

2.2，缓冲动画封装

//封装缓冲的函数，主要利用样式对象获取，需要达到的效果；
function buffer(element, targetObj) {
  //先清除定时器
  clearInterval(element.timer);
  //设置标识
  let flag = true;
  //定时器
  element.timer = setInterval(() => {
    //遍历元素对象
    for (let key in targetObj) {
      //进行样式获取，需要考虑 ie 的兼容；获取到这个样式属性的值；
      //获取到当前的值，这里注意获取的不是目标值，是当前元素的值，看要变化的是什么属性；
      let target = parseFloat(style(element, key));
      //设置步数，目标值 - 当前值
      let step = (targetObj[key] - target) / 10;
      //移动
      element.style[key] = target + step + "px";
      //利用标识，判断何时停止
      if (Math.abs(target - targetObj[key]) != Math.abs(step)) {
        flag = false;
      }
    }
    //停止清除定时器
    if (flag) {
      clearIntervale(element.timer);
    }
    //
  }, 80);
}

//获取样式里面的值，通过对象键值对，获取值；
function style(element, target) {
  //获取所有元素样式的兼容写法
  let values = window.getComputedStyle(element, null)
    ? window.getComputedStyle(element, null)
    : element.currentStyle;
  //返回样式里面的属性值
  return values[target];
}

2.3，回到顶部

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        height: 4400px;
        background-color: aquamarine;
      }
      button {
        position: absolute;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div></div>
    <button>回到顶部</button>

    <script>
      //写一个获取距离顶部距离的函数
      function scolltotop() {
        //如果没有滚动栏，先判断一下
        if (window.pageYOffset == null) {
          return { top: window.pageYOffset, left: window.pageXOffset };
        }
        //可以通过这个获取滚动条的值
        let top = document.body.scrollTop
          ? document.body.scrollTop
          : document.documentElement.scrollTop;
        let left = document.body.scrollLeft
          ? document.body.scrollLeft
          : document.documentElement.scrollLeft;
        return { top, left };
      }

      //获取btn
      document.querySelector("button").onclick = function () {
        let timer = setInterval(() => {
          //目标值
          let target = 0;
          //当前值
          let current = parseFloat(scolltotop().top);
          console.log(current);
          //步数
          let step =
            (target - current) / 10 > 0
              ? Math.ceil((target - current) / 10)
              : Math.floor((target - current) / 10);
          //移动滚动条
          window.scrollTo(0, step + current);

          //到达位置后清除
          if (current == target) {
            clearInterval(timer);
          }
        }, 20);
      };
    </script>
  </body>
</html>
搜索