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

1231 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.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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