阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 封装动画库基础

      封装动画库

      其实这不应该叫库,因为只有一个方法;

      借用了以前封装DOM库中的setCss方法来设置的;

      • 因为经常设置的,是
      • 宽度
      • 高度
      • 距离左边位置
      • 透明度
      • 背景颜色

      等这些的项;封装一个starMove的方法来处理这些;

      startMove(ele, json, fnEnd){};

      的其中ele,代表的是执行主体;json代表需要改变的样式,是一个json格式的对象;后面的fnEnd代表是回调函数;在事件发生的时候,同时回调一个函数;

      动画库里面moveType 中是数学运算是网上搜的,并不是自己写的;

      代码

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>动画移动</title>
          <style>
              #div1{
                  width: 200px;
                  height: 200px;
                  background: orange;
                  position: absolute;
                  left: 0;
                  top: 0;
                  cursor: pointer;
                  overflow: auto;//固定高宽,出现滚动条的意思;
              }
          </style>
      </head>
      <body>
      <div id="div1">ClickMe ComeOn</div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          var jsonStr={
              "left":"500",
              "width":"100",
              "height":"400",
              "opacity":"30",
              "background":"blue"
          };
          oDiv.onclick=function(){startMove(oDiv,jsonStr);};
          function startMove(ele, json, fnEnd) {//json是一个包含样式的JSON格式字符串,也可以是对象格式;
              var MAX=18;//如果是匀速运动,可以通过这个数控制匀速;如果是变速运动,则不需要这一行;
              clearInterval(ele.timer);
              ele.timer=setInterval(function (){
                  var booleanTarget=true;
                  for(var name in json) {//枚举JSON里面的属性和目标值;
                      var iTarget=json[name];//目标值;
                      if(name=='opacity') {//透明度因为要写兼容性处理,2种写法,所以opacity需要X100;
                          var cur=Math.round(parseFloat(setCss(ele, name))*100);
                      } else if(name=='background'){
                          var cur=json[name];
                      } else {
                          var cur=parseInt(setCss(ele, name));//对象的初始值;
                      }
                      var speed=(iTarget-cur)/5;//速度=(目标值-初始值)/一个数,属于减速运动;
                      speed=speed>0?Math.ceil(speed):Math.floor(speed);//减速运动的,速度的取整;
                      if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是匀速,可以通过这个来控制速度;和上面的speed只能取一个计算;
      
                      if(name=='opacity') {//如果输入透明度,需要为80这种的,不能是0.8
                          ele.style.filter='alpha(opacity:'+(cur+speed)+')';
                          ele.style.opacity=(cur+speed)/100;
                      }else if(name=='background'){
                          ele.style[name]=cur;
                      } else {
                          ele.style[name]=cur+speed+'px';
                      }
                      if(cur!=iTarget) {
                          booleanTarget=false;
                      }
                  }
                  if(booleanTarget) {
                      clearInterval(ele.timer);
                      if(typeof fnEnd==="function") {
                          fnEnd();
                      }
                  }
              }, 20);
          }
          function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
              if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
                  var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
                  var flag="getElementsByClassName" in document;
                  var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
                  return !reg.test(attr) ? parseFloat(value) : value;
              } else{
                  switch (attr) {
                      case "opacity":
                          curEle["style"][attr] = value;
                          curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                          break;
                      case "zIndex":
                          curEle["style"][attr] = value;
                          break;
                      default:
                          curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
                  }
              }
          };
      
      </script>
      
      目录
      目录