Mouvement uniforme JavaScript pour obtenir un effet de partage de la barre latérale (code)-js tutoriel-php.cn

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

不言

Libérer： 2018-08-31 09:55:31

original

1448 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!