Heim > Web-Frontend > js-Tutorial > So implementieren Sie eine Div-Bewegung in Javascript (Code)

So implementieren Sie eine Div-Bewegung in Javascript (Code)

不言
Freigeben: 2018-08-28 16:26:09
Original
5090 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Div-Bewegungen (Code) in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

Beschreibung: Klicken Sie auf die Schaltfläche, das Div bewegt sich und gibt die Stoppposition an (Timer)

 <script>
      window.onload=function () {
          var timer=null;
          var btn1=document.getElementById("btn1");
          btn1.onclick=function () {
              var div1=document.getElementById("div1");
              clearInterval(timer);//如果多次点击,那么会有多个定时器同时工作,移动速度不是设置的10,会有叠加效果,故应该清除
             timer= setInterval(function () {
                 if(div1.offsetLeft>300)
                 {
                     clearInterval(timer);
                 }
                  else
                    div1.style.left=div1.offsetLeft+10+&#39;px&#39;;
                  //offsetLeft获取当前div的位置
              },30);
          }
      }
    </script>
Nach dem Login kopieren

Verwandte Empfehlungen:

Mehrere Unterschiede in js Einführung in Schleifen (mit Code)

So implementieren Sie eine Benutzerregistrierungsschnittstelle mit JavaScript (mit Code)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Div-Bewegung in Javascript (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage