suchen

Heim >Web-Frontend >js-Tutorial >js einfache Methode zum Erlernen von Links- und Rechtsklick-Bewegung_Javascript-Fähigkeiten

js einfache Methode zum Erlernen von Links- und Rechtsklick-Bewegung_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:05:041287Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man Links- und Rechtsklickbewegungen einfach in js implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Hier können Sie den Effekt erzielen, dass Sie nach rechts klicken und das Feld nach rechts verschieben oder nach links klicken und das Feld nach links verschieben

Sie können setInterval verwenden, um zu erkennen, wie lange und wie weit sich das Div bewegen sollte, um den Bewegungseffekt zu erzielen.

Punkt 1: Wenn der linke Abstand des Elements kleiner als der Zielabstand ist, bewegt es sich in eine positive Richtung, andernfalls bewegt es sich in eine negative Richtung

if(run.offsetLeft <target){
speed = 2;
}else{
speed = -2;
}

Punkt 2: Wenn der linke Abstand des Elements gleich dem Zielabstand ist, stoppen Sie den Timer. Andernfalls entspricht der linke Abstand des Elements dem aktuellen linken Abstand plus dem Geschwindigkeitswert. 

if(run.offsetLeft ==target){
clearInterval(timer);
}
else{
run.style.left = run.offsetLeft +speed +"px";
}

Laden Sie den Code hoch

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
left:0;}
</style>
<script>
window.onload = function(){
 var run = document.getElementById("run");
 var btn = document.getElementById("btn");
 var btn1 = document.getElementById("btn1");
 var speed = 2;
 var timer = null;
 btn.onclick = function(){
  startrun(300);
 }
 btn1.onclick = function(){
  startrun(0);
 }
 function startrun(target){
   clearInterval(timer);
  timer = setInterval(function(){
   if(run.offsetLeft <target){
    speed = 2;
   }else{
    speed = -2;
   }
   if(run.offsetLeft ==target){
    clearInterval(timer);
   }
   else{
    run.style.left = run.offsetLeft +speed +"px";
   }
  },30)
 }
}
</script>
</head>
<body>
<input id="btn" type="button" value="运动向右">
<input id="btn1" type="button" value="运动向左">
<div id="run"></div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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：Beispiel für einen einfachen Mauszieheffekt mit Javascript_Javascript-KenntnissenNächster Artikel：Beispiel für einen einfachen Mauszieheffekt mit Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen