js einfache Methode zum Erlernen von Links- und Rechtsklick-Bewegung_Javascript-Fähigkeiten-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:05:04

Original

1232 Leute haben es durchsucht

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;
}

Nach dem Login kopieren

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";
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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