AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript动画函数增加属性，函数，层级，透明度的封装

2022-06-27 115
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript动画函数增加属性，函数，层级，透明度的封装

获取元素计算后的属性元素

 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 {
      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 () {
      //获取div此时left的当前位置,达到目标400
     // animate(my$("dv"),"left",400);
      //获取div此时的宽度,达到目标200
      animate(my$("dv"),"width",400);
    };
    my$("btn2").onclick=function () {
      animate(my$("dv"),"width",800);
    }
    //获取任意的一个属性的当前的属性值: left--->此时的left属性的值,width---当前的元素的宽
    function getStyle(element,attr) {
      //判断浏览器是否支持这个方法
      return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }
    //匀速动画
    //element---元素
    //attr---属性名字
    //target---目标位置
    function animate(element,attr ,target) {
      //清理定时器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = parseInt(getStyle(element,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) {
          //清理定时器
          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;
    }
    div{
      margin-top: 30px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>
<input type="button" value="变多个属性" 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) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;//默认,假设,全部到达目标
      for(var attr in json){
        //获取元素这个属性的当前的值
        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);
      }
      //测试代码
      console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
    },20);
  }
  my$("btn1").onclick=function () {
      animate(my$("dv"),{"width":400,"height":500,"left":500,"top":80});
  };
</script>
</body>
</html>


增加多个属性和回调函数


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性+函数</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      margin-top: 30px;
      width: 200px;
      height: 100px;
      background-color: green;
      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;
  }
  //element---元素
  //json---对象---多个属性及多个目标值
  //fn---函数
  function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;//默认,假设,全部到达目标
      for(var attr in json){
        //获取元素这个属性的当前的值
        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);
  }
  my$("btn1").onclick=function () {
    var json1={"width":400,"height":500,"left":500,"top":80};
      animate(my$("dv"),json1,function () {
        var json2={"width":40,"height":50,"left":50,"top":800};
        animate(my$("dv"),json2,function () {
          var json3={"width":450,"height":550,"left":550,"top":600};
          animate(my$("dv"),json3);
        });
      });
  };
</script>
</body>
</html>


增加多个属性，回调函数，层级，透明度


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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>
文章标签：
JavaScript
前端开发
关键词：
JavaScript属性
JavaScript动画
JavaScript函数
JavaScript封装
JavaScript函数封装
流楚丶格念
目录
相关文章
代码掌控者
|
29天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
43 1
我是快乐的嘟嘟
|
1月前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能？
如何使用时间切片来优化JavaScript动画的性能？
我是快乐的嘟嘟
87 51
光明顶阳顶天
|
1月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中，需要通过测试和验证来确定最适合的加载方式，以提供更好的用户体验和页面性能。
光明顶阳顶天
90 56
进步`于辰
|
1月前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
进步`于辰
42 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
我是快乐的嘟嘟
|
1月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果？
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果？
我是快乐的嘟嘟
25 4
我是快乐的嘟嘟
|
1月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响，如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中，需要根据具体情况选择合适的动画技术。
我是快乐的嘟嘟
24 1
疯狂的猿
|
1月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果，很有创意的发送邮件、联系内容等表单，基于ractive.js实现的动画效果，以发送信件的方式。
疯狂的猿
24 1
大树营养快线
|
1月前
|
前端开发 JavaScript 开发者
除了 Generator 函数，还有哪些 JavaScript 异步编程解决方案？
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作，以实现高效、可读和易于维护的代码。
大树营养快线
37 2
疯狂的猿
|
1月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画，js循环动画，简单的画面设计。非常丝滑有意思，欢迎对此代码感兴趣的朋友前来下载参考。
疯狂的猿
29 2
光明顶阳顶天
|
1月前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性，可以在不影响页面渲染的情况下异步加载脚本，并确保脚本的执行顺序。在实际应用中，需要根据具体情况选择合适的加载方式，并注意处理可能出现的问题，以确保页面能够正常加载和执行。
光明顶阳顶天
24 1