Partager des exemples de mouvements multi-objets à l'aide de JS
Cet article présente principalement la méthode JS pour réaliser un mouvement multi-objets. Il analyse en détail les principes et les techniques de fonctionnement associées du javascript pour réaliser un mouvement multi-objets sous forme d'exemples. J'espère que cela pourra aider tout le monde.
É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'élément "en mouvement" actuel et la valeur cible target
Remarque : En 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>Problème :
<🎜 ; >Lorsque la vitesse d'entrée et de sortie est relativement rapide, il apparaîtra que certains Li ne peuvent pas revenir à leur état d'origine et sont bloqués au milieuC'est parce que tous les Li partagent une minuterie < ; 🎜>Lorsque la souris entre dans le premier Quand li, appelez startMove pour démarrer un chronomètre ; lorsque la souris supprime li, vous devez également démarrer un chronomètre pour ramener li à sa position d'origine. Lorsque li atteint la moitié du chemin, nous passons au second. li, et la minuterie sera effacée en premier. À ce moment-là, le premier li est resté bloqué à mi-chemin.
Laissez chaque li avoir son propre timer pour contrôler ses modifications et définissez chaque li pendant la boucle for. Un de vos propres timers
liTags[i].timer = null;// 给每个li都添加一个timer
Le timer précédent ici a été remplacé par
(le timer de l'objet actuel) ; il n'y a pas de problème ici ;obj.timer Le code complet est le suivant :
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body>
<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>Ce 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment partager Quark Netdisk avec Baidu Netdisk ?
Mar 14, 2024 pm 04:40 PM
Quark Netdisk et Baidu Netdisk sont tous deux des outils de stockage très pratiques. De nombreux utilisateurs se demandent si ces deux logiciels sont interopérables ? Comment partager Quark Netdisk avec Baidu Netdisk ? Laissez ce site présenter en détail aux utilisateurs comment enregistrer les fichiers Quark Network Disk sur Baidu Network Disk. Comment enregistrer des fichiers de Quark Network Disk vers Baidu Network Disk Méthode 1. Si vous souhaitez savoir comment transférer des fichiers de Quark Network Disk vers Baidu Network Disk, téléchargez d'abord les fichiers qui doivent être enregistrés sur Quark Network Disk, puis ouvrez le client Baidu Network Disk, sélectionnez le dossier dans lequel le fichier compressé doit être enregistré et double-cliquez pour ouvrir le dossier. 2. Après avoir ouvert le dossier, cliquez sur « Télécharger » dans le coin supérieur gauche de la fenêtre. 3. Recherchez le fichier compressé qui doit être téléchargé sur votre ordinateur et cliquez pour le sélectionner.
Comment partager NetEase Cloud Music avec WeChat Moments_Tutorial sur le partage de NetEase Cloud Music avec WeChat Moments
Mar 25, 2024 am 11:41 AM
1. Tout d'abord, nous entrons dans NetEase Cloud Music, puis cliquons sur l'interface de la page d'accueil du logiciel pour accéder à l'interface de lecture de chansons. 2. Ensuite, dans l'interface de lecture de la chanson, recherchez le bouton de fonction de partage en haut à droite, comme indiqué dans l'encadré rouge de la figure ci-dessous, cliquez pour sélectionner le canal de partage dans le canal de partage, cliquez sur l'option « Partager sur » sur en bas, puis sélectionnez le premier « WeChat Moments » qui vous permet de partager du contenu avec WeChat Moments.
Comment partager des fichiers avec des amis sur Baidu Netdisk
Mar 25, 2024 pm 06:52 PM
Récemment, le client Android Baidu Netdisk a inauguré une nouvelle version 8.0.0. Cette version apporte non seulement de nombreux changements, mais ajoute également de nombreuses fonctions pratiques. Parmi eux, le plus frappant est l’amélioration de la fonction de partage de dossiers. Désormais, les utilisateurs peuvent facilement inviter des amis à rejoindre et partager des fichiers importants au travail et dans la vie, obtenant ainsi une collaboration et un partage plus pratiques. Alors, comment partager les fichiers que vous devez partager avec vos amis ? Ci-dessous, l'éditeur de ce site vous fera une introduction détaillée, j'espère qu'il pourra vous aider ! 1) Ouvrez l'application Baidu Cloud, cliquez d'abord pour sélectionner le dossier approprié sur la page d'accueil, puis cliquez sur l'icône [...] dans le coin supérieur droit de l'interface (comme indiqué ci-dessous) 2) Cliquez ensuite sur [+] dans la colonne "Membres partagés" 】, et enfin cochez tous
Partage de compte membre Mango tv 2023
Feb 07, 2024 pm 02:27 PM
Mango TV propose différents types de films, séries télévisées, émissions de variétés et autres ressources, et les utilisateurs peuvent choisir librement de les regarder. Les membres de Mango TV peuvent non seulement regarder toutes les séries VIP, mais également définir la qualité d'image la plus haute définition pour aider les utilisateurs à regarder les séries avec plaisir. Ci-dessous, l'éditeur vous proposera des comptes d'adhésion gratuits à Mango TV que les utilisateurs pourront utiliser, dépêchez-vous et jetez un œil. Regarde. Mango TV dernier compte membre partage gratuit 2023 : Remarque : Ce sont les derniers comptes membres collectés, vous pouvez vous connecter et les utiliser directement, ne changez pas le mot de passe à volonté. Numéro de compte : 13842025699 Mot de passe : qds373 Numéro de compte : 15804882888 Mot de passe : evr6982 Numéro de compte : 13330925667 Mot de passe : jgqae Numéro de compte : 1703
Résolvez le problème selon lequel le partage Discuz WeChat ne peut pas être affiché
Mar 09, 2024 pm 03:39 PM
Titre : Pour résoudre le problème de l'impossibilité d'afficher les partages Discuz WeChat, des exemples de code spécifiques sont nécessaires. Avec le développement de l'Internet mobile, WeChat est devenu un élément indispensable de la vie quotidienne des gens. Dans le développement de sites Web, afin d'améliorer l'expérience utilisateur et d'étendre la visibilité du site Web, de nombreux sites Web intégreront des fonctions de partage WeChat, permettant aux utilisateurs de partager facilement le contenu du site Web avec des groupes Moments ou WeChat. Cependant, parfois, lorsque vous utilisez des systèmes de forum open source tels que Discuz, vous rencontrerez le problème de l'impossibilité d'afficher les partages WeChat, ce qui entraîne certaines difficultés pour l'expérience utilisateur.
Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest
Partagez deux méthodes d'installation pour les pilotes d'imprimante HP
Mar 13, 2024 pm 05:16 PM
Les imprimantes HP sont des équipements d'impression essentiels dans de nombreux bureaux. L'installation du pilote d'imprimante sur l'ordinateur peut parfaitement résoudre des problèmes tels que l'impossibilité de se connecter de l'imprimante. Alors, comment installer le pilote d'imprimante HP ? L'éditeur ci-dessous vous présentera deux méthodes d'installation du pilote d'imprimante HP. La première méthode : télécharger le pilote depuis le site officiel 1. Recherchez le site officiel de HP Chine dans le moteur de recherche et dans la colonne d'assistance, sélectionnez [Logiciel et pilotes]. 2. Sélectionnez la catégorie [Imprimante], entrez votre modèle d'imprimante dans la zone de recherche et cliquez sur [Soumettre] pour trouver votre pilote d'imprimante. 3. Sélectionnez l'imprimante correspondante en fonction de votre système informatique. Pour win10, sélectionnez le pilote pour le système win10. 4. Une fois le téléchargement réussi, recherchez-le dans le dossier
Comment partager ppt
Mar 20, 2024 pm 07:51 PM
Les personnes sur le lieu de travail seront familiarisées avec la production PPT, car qu'il s'agisse d'un résumé de fin d'année ou d'un rapport de travail, de nombreuses entreprises exigent qu'il soit présenté sous forme de PPT. A ce moment, j'ai rencontré un problème, c'est-à-dire comment partager PPT ? Ne vous inquiétez pas, l'éditeur ci-dessous vous montrera comment partager PPT. 1. Sélectionnez d'abord le PPT modifié et cliquez sur Enregistrer dans le coin supérieur gauche (si vous utilisez WPS, vous pouvez d'abord cliquer sur Connexion). 2. Cliquez ensuite sur l'icône de partage dans la barre de menu, comme indiqué ci-dessous. 3. Ensuite, l'interface de partage illustrée ci-dessous apparaîtra. Vous pouvez voir qu'un lien de partage apparaîtra. Cliquez pour envoyer le lien à partager. 4. Vous pouvez également cliquer sur « Autoriser les amis à modifier » dans le coin inférieur gauche de l'image ci-dessous, afin que vos amis puissent également cliquer pour modifier ce PPT. 5. Si nécessaire, donnez P
