Maison >interface Web >js tutoriel >Mouvement uniforme JavaScript pour obtenir un effet de partage de la barre latérale (code)

Mouvement uniforme JavaScript pour obtenir un effet de partage de la barre latérale (code)

不言original: 2018-08-31 09:55:311489parcourir

Le contenu de cet article concerne l'effet de partage de la barre latérale (code) obtenu par le mouvement uniforme javascript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Principe

Utilisez offsetLeft (la distance de l'objet par rapport à la gauche) plus une vitesse fixe.
Utilisez timer setInterval et clearInterval
Déterminez si la vitesse de course est positive ou négative selon que la position actuelle par rapport à la position cible est une valeur positive ou négative valeur négative.

Obtenir un effet de partage dans la barre latérale

<!DOCTYPE html>
<html>
  <head>
    <title>用运动做一个侧边栏分享</title>
    <style>
      #div1{
        width: 150px;
        height: 200px;
        background: #0f0;
        position: absolute;
        left: -150px;
      }
      #div1 span{
        position: absolute;
        width: 20px;
        height: 60px;
        line-height: 20px;
        background: #00f;
        right: -20px;
        top: 70px;
      }
    </style>
    <script>
      window.onload=function(){
        var oDiv=document.getElementById("div1");
        oDiv.onmouseover=function(){
          startMove(10,0);
        }
        oDiv.onmouseout=function(){
          startMove(-10,-150);
        }
      }
      var timer=null;
      function startMove(speed,iTarget){
        var oDiv=document.getElementById("div1");
        clearInterval(timer);
        timer=setInterval(function(){
          if(oDiv.offsetLeft==iTarget){
            clearInterval(timer);
          }else{
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
          }
        },30)
      }
    </script>
  </head>
  <body>
    <div id="div1">
      <span>分享到</span>
    </div>
  </body>
</html>

Lorsque nous écrivons un morceau de code, nous devons effectuer une optimisation des tests. Il n'y a aucun problème de compatibilité dans le test. La fonction de mouvement encapsulée a deux paramètres. À l'heure actuelle, nous examinons si les paramètres peuvent être simplifiés.
Par exemple, lorsque nous prenons un taxi, nous pouvons indiquer au conducteur la destination, mais nous n'avons pas besoin de dire au conducteur à quelle vitesse se rendre à la destination, nous pouvons donc simplifier le paramètre à un seul paramètre. Le code spécifique est le suivant.

Implémentation de l'effet de partage de la barre latérale - simplification des paramètres de vitesse

<!DOCTYPE html>
<html>
  <head>
    <title>用运动做一个侧边栏分享</title>
    <style>
      #div1{
        width: 150px;
        height: 200px;
        background: #0f0;
        position: absolute;
        left: -150px;
      }
      #div1 span{
        position: absolute;
        width: 20px;
        height: 60px;
        line-height: 20px;
        background: #00f;
        right: -20px;
        top: 70px;
      }
    </style>
    <script>
      window.onload=function(){
        var oDiv=document.getElementById("div1");
        oDiv.onmouseover=function(){
          startMove(0);
        }
        oDiv.onmouseout=function(){
          startMove(-150);
        }
      }
      var timer=null;
      function startMove(iTarget){
        var oDiv=document.getElementById("div1");
        clearInterval(timer);
        timer=setInterval(function(){
          var speed=0;
          if(oDiv.offsetLeft>iTarget){
            speed=-10;
          }else{
            speed=10;
          }
          if(oDiv.offsetLeft==iTarget){
            clearInterval(timer);
          }else{
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
          }
        },30)
      }
    </script>
  </head>
  <body>
    <div id="div1">
      <span>分享到</span>
    </div>
  </body>
</html>

Recommandations associées :

Explication détaillée de l'implémentation javascript des exemples de barre latérale dynamique

Javascript natif permet d'obtenir des compétences d'effet d'animation de mouvement uniforme_javascript

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser cropper.js sur le terminal mobile pour recadrer des images et les télécharger (analyse de code)Article suivant：Comment utiliser cropper.js sur le terminal mobile pour recadrer des images et les télécharger (analyse de code)

Articles Liés

Voir plus