Résumé des points de connaissances liés au mouvement JS (avec des exemples de mouvement élastique)_compétences javascript-js tutoriel-php.cn

Résumé des points de connaissances liés au mouvement JS (avec des exemples de mouvement élastique)_compétences javascript

WBOY

Libérer： 2016-05-16 15:21:13

original

1319 Les gens l'ont consulté

Cet article résume les points de connaissances liés aux sports JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Tout ce qui se trouve dans le cadre de mouvement multi-objets ne peut pas être partagé

2.la fréquence de sortie du document.title ne peut pas être trop élevée

3. Essayez d'éviter d'écrire des décimales lors de l'écriture de JS, car l'intérieur de l'ordinateur est simulé et non réellement stocké

Par exemple : 0,07*100 n'est pas 7 en fonctionnement JS

var a=3;
var b=3.00000000000000000001;
alert(a=b);

Copier après la connexion

Le résultat de sortie est vrai

4. Lorsque vous écrivez un programme, pensez d'abord au général, puis au spécifique. Lors de l'écriture d'un programme, éliminez d'abord le spécial, puis écrivez le général

if(特殊1)
{}
else if(特殊2)
{}
else
{
 一般
}

Copier après la connexion

5. Pour les tableaux, vous pouvez utiliser soit une boucle for, soit une boucle for..in. La boucle for étant plus contrôlable, il est préférable d'utiliser une boucle for

Pour les objets (json), vous ne pouvez utiliser que la boucle for..in

6. Les performances d'écriture de *{margin:0;padding:0;} en CSS ne sont pas très bonnes

7. Conversion de mise en page, définissez d'abord les valeurs de gauche et du haut pour chaque élément, puis définissez la position absolue pour chaque élément et effacez la marge

8. Il y aura une pause lors de l'utilisation d'UL pour faire de l'exercice dans IE7. À ce moment, vous pouvez essayer d'utiliser DIV

9. Considérez le facteur de friction iSpeed*0,95 (la taille de la décimale dépend de la taille de la friction)

10. Accélération, plus on s'éloigne de la cible, plus l'accélération est grande, et plus elle est proche de la cible, plus elle est petite (iTarget-obj.offsetLeft)/50

11. Une meilleure combinaison d'accélération et de friction est de 5 et 0,7, c'est-à-dire iSpeed = (iTarget-obj.offsetLeft)/5;

12. Lorsqu'il y a un problème avec le programme, réfléchissez à la raison pour laquelle le problème s'est produit

13. Le mouvement élastique ne peut pas être utilisé lorsque le style ne peut pas franchir la limite

14. Conditions d'arrêt du mouvement élastique : distance trop proche et vitesse trop faible

15. L'analyse doit être effectuée avec soin, car le style ignorera automatiquement les décimales. Par conséquent, afin d'éviter que les décimales manquantes ne s'additionnent, vous pouvez définir une variable pour la stocker, puis l'attribuer au style. obj.style.left=gauche "px";

Pièce jointe : exemple de mouvement élastique JavaScript

Principe du mouvement : mouvement d'accélération, mouvement de décélération, mouvement de friction

Le code est le suivant :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  iSpeed += (iTarget - obj.offsetLeft)/5;
  iSpeed *= 0.7;
  left += iSpeed;
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
   clearInterval(obj.timer);
   obj.style.left = iTarget + 'px';
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; ">
</div>
</body>
</html>

Copier après la connexion

Pour plus de contenu lié aux effets de mouvement JavaScript, veuillez consulter le sujet spécial sur ce site : "

Résumé des effets et techniques de mouvement JavaScript"

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.