Comment utiliser js pour obtenir des effets de mouvement horizontal et vertical-js tutoriel-php.cn

Comment utiliser js pour obtenir des effets de mouvement horizontal et vertical

王林

Libérer： 2020-04-08 09:20:47

avant

3357 Les gens l'ont consulté

Comment utiliser js pour obtenir des effets de mouvement horizontal et vertical

Analyse du mouvement horizontal :

peut être vu comme le changement de la marge gauche d'un objet.

Par exemple : se déplacer vers la droite rend la marge de gauche de plus en plus grande (la valeur est positive), vous pouvez ajuster la marge gauche de l'objet pour y parvenir

Se déplacer vers la gauche fait la marge gauche de plus en plus petite (la valeur est positive) est négative), la marge gauche de l'objet peut être ajustée pour obtenir

Le code réel est le suivant :

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

Copier après la connexion

Analyse du mouvement vertical :

peut être vu comme un changement dans la marge supérieure d'un objet.

Par exemple : lorsque vous déplacez vers le bas, la marge supérieure devient de plus en plus grande (la valeur est positive). Vous pouvez ajuster la marge supérieure de l'objet pour y parvenir.

Déplacer vers le haut rend l'objet plus grand. marge supérieure de plus en plus petite (la valeur est positive). Négative), la marge supérieure de l'objet peut être ajustée pour obtenir

Le code réel est le suivant :

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

Copier après la connexion

Tutoriels associés recommandés : Tutoriel js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!