js méthode simple pour réaliser les compétences de mouvement_javascript des clics gauche et droit-js tutoriel-php.cn

js méthode simple pour réaliser les compétences de mouvement_javascript des clics gauche et droit

WBOY

Libérer： 2016-05-16 16:05:04

original

1286 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter simplement des mouvements de clic gauche et droit dans js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Ici, vous pouvez obtenir l'effet de cliquer vers la droite et la boîte se déplace vers la droite, en cliquant vers la gauche et la boîte se déplace vers la gauche

Vous pouvez utiliser setInterval pour comprendre combien de temps et jusqu'où le div doit se déplacer pour obtenir l'effet de mouvement.

Point 1 : Si la distance gauche de l'élément est inférieure à la distance cible, il se déplace dans le sens positif, sinon il se déplace dans le sens négatif

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

Copier après la connexion

Point 2 : Si la distance gauche de l'élément est égale à la distance cible, arrêtez le chronomètre. Sinon, la distance gauche de l'élément est égale à la distance gauche actuelle plus la valeur de la vitesse.

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

Copier après la connexion

Téléchargez le code

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

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.