So erzielen Sie mit js horizontale und vertikale Bewegungseffekte-js-Tutorial-php.cn

So erzielen Sie mit js horizontale und vertikale Bewegungseffekte

王林

Freigeben： 2020-04-08 09:20:47

nach vorne

3357 Leute haben es durchsucht

So erzielen Sie mit js horizontale und vertikale Bewegungseffekte

Horizontale Bewegungsanalyse:

kann als Änderung des linken Randes eines Objekts angesehen werden.

Zum Beispiel: Durch Bewegen nach rechts wird der linke Rand immer größer (der Wert ist positiv). Sie können den linken Rand des Objekts anpassen, um dies zu erreichen.

Durch Bewegen nach links wird der linke Rand immer größer Der linke Rand wird immer kleiner (der Wert ist positiv) und negativ), der linke Rand des Objekts kann angepasst werden, um

Der eigentliche Code lautet wie folgt:

<style>
    *{padding: 0;margin: 0px;}
    #box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
  <button id="btn">向右</button>
  <button id="btn1">向左</button>
  <div id="box"></div>
  <script>
    var box=document.getElementById(&#39;box&#39;);
    //速度
    var index=10;
    //定时器编号
    var b;
    //添加向右点击事件
    document.getElementById(&#39;btn&#39;).onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
    }
    //添加向左点击事件
    document.getElementById(&#39;btn1&#39;).onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
    }
    //box移动位置
    function getMove(index){
      //获取box的左距离
      var a=window.getComputedStyle(box,null).left;
      a=parseInt(a);//转换为数值
      box.style.left=a+index+&#39;px&#39;//计算box的左距离
    }
  </script>
</body>

Nach dem Login kopieren

Vertikale Bewegungsanalyse :

kann als Änderung am oberen Rand eines Objekts gesehen werden.

Zum Beispiel: Wenn Sie sich nach unten bewegen, wird der obere Rand immer größer (der Wert ist positiv). Sie können den oberen Rand des Objekts anpassen, um dies zu erreichen Der obere Rand wird immer kleiner (der Wert ist negativ). Der obere Rand des Objekts kann angepasst werden, um

Der eigentliche Code lautet wie folgt:

<style>
    *{padding: 0;margin: 0px;}
    #box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
  <button id="btn">向下</button>
  <button id="btn1">向上</button>
  <div id="box"></div>
  <script>
    var box=document.getElementById(&#39;box&#39;);
    //速度
    var index=10;
    //定时器编号
    var b;
    //添加向下点击事件
    document.getElementById(&#39;btn&#39;).onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
    }
    //添加向上点击事件
    document.getElementById(&#39;btn1&#39;).onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
    }
    //box移动位置
    function getMove(index){
      //获取box的上距离
      var a=window.getComputedStyle(box,null).top;
      a=parseInt(a);//转换为数值
      box.style.top=a+index+&#39;px&#39;//计算box的上距离
    }
  </script>
</body>

Nach dem Login kopieren

Empfohlene verwandte Tutorials:

JS-Tutorial

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit js horizontale und vertikale Bewegungseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!