移动元素

最新推荐文章于 2021-11-08 08:02:56 发布

广东话的蛇皇

最新推荐文章于 2021-11-08 08:02:56 发布

阅读量153

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

移动元素

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

    * {
      margin: 0;
      padding: 0;
    }

    input {
      margin-top: 20px;
    }

    div {
      margin-top: 30px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="div"></div>
<script>
  //div要移动,要脱离文档流---position:absolute
  //如果样式的代码是在style的标签中设置,外面是获取不到
  //如果样式的代码是在style的属性设置,外面是可以获取
  //获取div的当前位置
  //console.log(document.getElementById("div").offsetLeft);

  //点击第一个按钮移动到400px

  document.getElementById("btn1").onclick = function () {
    //一会要清理定时器(只产生一个定时器)
   var timeId= setInterval(function () {
      //获取div的当前的位置
      var current = document.getElementById("div").offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 9;
      //每次移动后的距离
      current += step;
     //判断当前移动后的位置是否到达目标位置
      if(current<=400){
        document.getElementById("div").style.left=current+"px";
      }else{
        //清理定时器
        clearInterval(timeId);
      }
    }, 20);
  };
  //点击第二个按钮移动到800px

  document.getElementById("btn2").onclick = function () {
    //一会要清理定时器(只产生一个定时器)
    var timeId= setInterval(function () {
      //获取div的当前的位置
      var current = document.getElementById("div").offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 10;
      //每次移动后的距离
      current += step;
      //判断当前移动后的位置是否到达目标位置
      if(current<=800){
        document.getElementById("div").style.left=current+"px";
      }else{
        //清理定时器
        clearInterval(timeId);
      }
    }, 20);
  };
</script>
</body>
</html>

封装动画函数

 function animate(element, target) {
    //先清理定时器
    clearInterval(element.timeId);
    //一定要清理定时器(只产生一个定时器)
    element.timeId = setInterval(function () {
      //获取div的当前的位置
      var current = element.offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 10;
      step = current < target ? step : -step;
      //每次移动后的距离
      current += step;
      //判断当前移动后的位置是否到达目标位置
      if (Math.abs(target - current) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval( element.timeId );
        element.style.left = target + "px";
      }
    }, 20);
  }

封装变速动画函数

<!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

    document.getElementById("btn1").onclick = function () {
      animate(my$("dv"), 400);
    };
    document.getElementById("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>

封装变速动画函数（任意一个属性）

    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);
    }


	function getStyle (element,prop) {
	if(window.getComputedStyle) {
		return window.getComputedStyle(element,null)[prop];
		}else{
			return element.currentStyle[prop];
		}
	}

封装变速动画函数(针对多个属性)

  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);
  }

封装变速动画函数(针对多个属性并且加上回调函数：达到一定条件才会触发的函数，并且不影响主函数的执行)

  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);
  }
//回调函数可以让动画一个个无缝连接
document.getElementById("btn1").onclick=function () {
    var json1={"width":400,"height":500,"left":500,"top":80};
      animate(document.getElementById("div"),json1,function () {
        var json2={"width":40,"height":50,"left":50,"top":800};
        animate(document.getElementById("div"),json2,function () {
          var json3={"width":450,"height":550,"left":550,"top":600};
          animate(document.getElementById("div"),json3);
        });
      });
  };

封装变速动画函数(针对多个属性并且加上回调函数：达到一定条件才会触发的函数，并且不影响主函数的执行再加上层级和透明度的改变)

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);
  }