Einheitliche JavaScript-Bewegung, um einen Sidebar-Sharing-Effekt zu erzielen (Code)-js-Tutorial-php.cn

Einheitliche JavaScript-Bewegung, um einen Sidebar-Sharing-Effekt zu erzielen (Code)

不言

Freigeben： 2018-08-31 09:55:31

Original

1490 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem durch Javascript Uniform Motion erzielten Sidebar-Sharing-Effekt. Ich hoffe, dass er für Sie hilfreich ist.

Prinzip

Verwenden Sie offsetLeft (den Abstand des Objekts von links) plus eine feste Geschwindigkeit.
Verwenden Sie den Timer setInterval und clearInterval
Bestimmen Sie, ob die Laufgeschwindigkeit positiv oder negativ ist, basierend darauf, ob die aktuelle Position zur Zielposition a ist positiver oder negativer Wert negativer Wert.

Erzielen Sie einen Sidebar-Sharing-Effekt

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

Nach dem Login kopieren

Wenn wir einen Code schreiben, sollten wir eine Testoptimierung durchführen. Im Test gibt es keine Kompatibilitätsprobleme. Die gekapselte Bewegungsfunktion hat derzeit zwei Parameter.
Wenn wir beispielsweise ein Taxi nehmen, können wir dem Fahrer das Ziel mitteilen, aber wir müssen dem Fahrer nicht sagen, wie schnell er zum Ziel kommt, sodass wir den Parameter auf einen Parameter vereinfachen können. Der spezifische Code lautet wie folgt.

Sidebar-Sharing-Effekt implementieren – Geschwindigkeitsparameter vereinfachen

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

Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erläuterung der Javascript-Implementierung dynamischer Sidebar-Beispiele

Natives Javascript erreicht einheitliche Bewegungsanimationseffekte_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonEinheitliche JavaScript-Bewegung, um einen Sidebar-Sharing-Effekt zu erzielen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!