广告关闭/开机提示关闭

最新推荐文章于 2021-05-26 07:30:01 发布

广东话的蛇皇

最新推荐文章于 2021-05-26 07:30:01 发布

阅读量109

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104299795

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

广告关闭/开机提示关闭

在这里插入图片描述

<!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>
  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);
  }
  document.getElementById("closeButton").onclick=function () {
    //设置最下面的div的高渐渐的变成0
    animate(document.getElementById("bottomPart"),{"height":0},function () {
      animate(document.getElementById("box"),{"width":0});
    });
  };

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

广东话的蛇皇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
广告关闭/开机提示关闭

广告关闭/开机提示关闭<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 322px; position: fixed...
复制链接

扫一扫

专栏目录