suchen

Heim  >  Artikel  >  Web-Frontend  >  Einheitliche JavaScript-Bewegung, um einen Sidebar-Sharing-Effekt zu erzielen (Code)

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

不言
不言Original
2018-08-31 09:55:311434Durchsuche

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie cropper.js auf dem mobilen Endgerät, um Bilder zuzuschneiden und hochzuladen (Code-Analyse)Nächster Artikel：So verwenden Sie cropper.js auf dem mobilen Endgerät, um Bilder zuzuschneiden und hochzuladen (Code-Analyse)

In Verbindung stehende Artikel

Mehr sehen