Cette fois, je vais vous présenter la méthode d'implémentation du mouvement multi-objets JS. Quelles sont les précautions pour implémenter le mouvement multi-objets JS. Ce qui suit est un cas pratique, prenons un. regarder.
Étapes de base
1. Obtenez les éléments à déplacer par plusieurs objets via getElementsByTagName 2. Ensuite, la boucle for parcourt les éléments et ajoute des événements
3. Définissez la fonction startMove, qui nécessite deux paramètres. " " élément et la valeur cible cible
Remarque : Dans le mouvement multi-objets, tout ne peut pas être partagé
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); // 第一步 for(var i=0;i<liTags.length;i++){ // 第二步 liTags[i].onmouseover = function () { startMove(this,400); } liTags[i].onmouseout = function () { startMove(this,200); } } } var timer = null; function startMove(obj,iTarget) { // 第三步,2个参数 clearInterval(timer); timer = setInterval(function () { var iSpeed = (iTarget - obj.offsetWidth)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理 if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth+iSpeed+'px'; } },30); } </script>
Question :
Lorsque la vitesse d'entrée et de sortie est relativement rapide, certains li ne pourront pas revenir à leur état d'origine et resteront bloqués au milieuC'est parce que tous les li partagent une minuterie Lorsque la souris se déplace dans le premier li, startMove est appelé pour démarrer un timer ; lorsque la souris supprime le li, un timer doit également être démarré pour ramener le li à sa position d'origine. Lorsque le li atteint la moitié du chemin, nous passons au premier li. deuxième li. Premier La minuterie sera effacée, et à ce moment le premier li sera bloqué à mi-chemin.
Résolvez ce problème :
Laissez chaque li avoir son propre timer pour contrôler ses modifications. Pendant la boucle for, définissez un timer pour chaque li
. Ensuite, la minuterie utilisée à chaque fois dans starMove est celle du li actuel, il n'y aura donc aucune interférence les unes avec les autres.liTags[i].timer = null;// 给每个li都添加一个timer
Le minuteur précédent ici a été remplacé par
(le propre minuteur de l'objet actuel) ; il n'y a aucun problème ici ;obj.timer
Le code complet est le suivant :
<style> ul{list-style: none;} ul li{ margin: 10px; width: 200px;height: 50px; background: lightblue; } </style>
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[i].onmouseover = function () { startMove(this,400); } liTags[i].onmouseout = function () { startMove(this,200); } } } function startMove(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var iSpeed = (iTarget - obj.offsetWidth)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(obj.offsetWidth == iTarget){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth+iSpeed+'px'; } },30); } </script>
<script> window.onload = function () { var aImgs = document.getElementsByTagName('img'); for(var i=0;i<aImgs.length;i++){ aImgs[i].timer = null; aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性 aImgs[i].onmouseover = function () { startMove(this,30); } aImgs[i].onmouseout = function () { startMove(this,100); } } } // var alpha = 100; 这里alpha在多物体运动里 不能公用 function startMove(obj,iTarget) { clearInterval(obj.timer); var iSpeed = (iTarget - obj.alpha)/10; iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed); obj.timer = setInterval(function(){ if(obj.alpha == iTarget){ clearInterval(obj.timer); }else{ obj.alpha += iSpeed; obj.style.opacity =obj.alpha/100; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; } },30); } </script>
Lecture recommandée :
Comment gérer la page de rendu sans réflexion lorsque le routage de vue est rafraîchi en mode historique vue . Explication détaillée des étapes pour obtenir un effet de défilement fluide avec jsCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!