interface Web
js tutoriel
Explication détaillée de la méthode de réalisation de mouvements multi-objets en JS
Explication détaillée de la méthode de réalisation de mouvements multi-objets en JS
Cet article présente principalement la méthode de réalisation de mouvements multi-objets en JS et analyse en détail le principe et les compétences opérationnelles associées de javascript pour réaliser des mouvements multi-objets sous forme d'exemples. Si vous êtes intéressé par JavaScript, veuillez vous référer à cet article
Cet article analyse la méthode de réalisation de mouvements multi-objets en JS à travers des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Étapes de base
Obtenez ce que vous voulez faire grâce à
1. 🎜>getElementsByTagName
2 Ensuite, la boucle for parcourt les éléments et ajoute des événements3 Définissez la fonction startMove, qui nécessite deux paramètres, l'élément "en mouvement" actuel et. la valeur cible cible
<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>En mouvement multi-objets, tout ne peut pas être partagé
Problème :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 milieu
C'est parce que tous les Li partagent une minuterie ; ;
Lorsque la souris se déplace dans le premier li, appelez startMove pour démarrer une minuterie ; lorsque la souris supprime le li, une minuterie doit également être démarrée pour ramener le li à sa position d'origine. le li atteint la moitié, nous passons au deuxième li, la minuterie sera effacée en premier, puis le premier li sera bloqué à mi-chemin.
liTags[i].timer = null;// 给每个li都添加一个timer
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
obj.timer Ensuite, la minuterie utilisée à chaque fois dans starMove est celle actuelle, il n'y aura donc aucune interférence les unes avec les autres.
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 ;<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body>
Le code complet est le suivant :
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
background: lightblue;
}
</style>Ajoutez du 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>Code js complet
<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>Alors regardons sur un exemple : Plus de mouvement d'objet - changement de transparence
Ce qui précède est tout le contenu de cet article, j'espère qu'il sera utile à tous ceux qui apprennent JavaScript ! !Implémentation JavaScript de l'ajout et de la suppression d'éléments dans la liste déroulante de sélection, exemples de partage
Recherche binaire de l'algorithme Javascript arbre L'exemple de code
parle de la sous-séquence commune la plus longue en JavaScriptCe 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
AI Hentai Generator
Générez AI Hentai gratuitement.
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)
Comment écrire un roman dans l'application Tomato Free Novel Partagez le tutoriel sur la façon d'écrire un roman dans l'application Tomato Novel
Mar 28, 2024 pm 12:50 PM
Tomato Novel est un logiciel de lecture de romans très populaire. Nous avons souvent de nouveaux romans et bandes dessinées à lire dans Tomato Novel. De nombreux amis souhaitent également gagner de l'argent de poche et éditer le contenu de leur roman. Je veux écrire dans du texte. Alors, comment pouvons-nous y écrire le roman ? Mes amis ne le savent pas, alors allons ensemble sur ce site. Prenons le temps de regarder une introduction à la façon d'écrire un roman. Partagez le didacticiel du roman Tomato sur la façon d'écrire un roman. 1. Ouvrez d'abord l'application de roman gratuite Tomato sur votre téléphone mobile et cliquez sur Personal Center - Writer Center 2. Accédez à la page Tomato Writer Assistant - cliquez sur Créer un nouveau livre. à la fin du roman.
Comment entrer dans le bios sur la carte mère Colorful ? Apprenez-vous deux méthodes
Mar 13, 2024 pm 06:01 PM
Les cartes mères colorées jouissent d'une grande popularité et d'une part de marché élevée sur le marché intérieur chinois, mais certains utilisateurs de cartes mères colorées ne savent toujours pas comment accéder au BIOS pour les paramètres ? En réponse à cette situation, l'éditeur vous a spécialement proposé deux méthodes pour accéder au bios coloré de la carte mère. Venez l'essayer ! Méthode 1 : utilisez la touche de raccourci de démarrage du disque U pour accéder directement au système d'installation du disque U. La touche de raccourci de la carte mère Colorful pour démarrer le disque U en un seul clic est ESC ou F11. Tout d'abord, utilisez Black Shark Installation Master pour créer un Black. Disque de démarrage Shark U, puis allumez l'ordinateur lorsque vous voyez l'écran de démarrage, appuyez continuellement sur la touche ESC ou F11 du clavier pour accéder à une fenêtre de sélection de la séquence d'éléments de démarrage. Déplacez le curseur à l'endroit où "USB. " s'affiche, puis
Comment récupérer des contacts supprimés sur WeChat (un tutoriel simple vous explique comment récupérer des contacts supprimés)
May 01, 2024 pm 12:01 PM
Malheureusement, les gens suppriment souvent certains contacts accidentellement pour certaines raisons. WeChat est un logiciel social largement utilisé. Pour aider les utilisateurs à résoudre ce problème, cet article explique comment récupérer les contacts supprimés de manière simple. 1. Comprendre le mécanisme de suppression des contacts WeChat. Cela nous offre la possibilité de récupérer les contacts supprimés. Le mécanisme de suppression des contacts dans WeChat les supprime du carnet d'adresses, mais ne les supprime pas complètement. 2. Utilisez la fonction intégrée « Récupération du carnet de contacts » de WeChat. WeChat fournit une « Récupération du carnet de contacts » pour économiser du temps et de l'énergie. Les utilisateurs peuvent récupérer rapidement les contacts précédemment supprimés grâce à cette fonction. 3. Accédez à la page des paramètres WeChat et cliquez sur le coin inférieur droit, ouvrez l'application WeChat « Moi » et cliquez sur l'icône des paramètres dans le coin supérieur droit pour accéder à la page des paramètres.
Comment définir la taille de la police sur le téléphone mobile (ajustez facilement la taille de la police sur le téléphone mobile)
May 07, 2024 pm 03:34 PM
La définition de la taille de la police est devenue une exigence de personnalisation importante à mesure que les téléphones mobiles deviennent un outil important dans la vie quotidienne des gens. Afin de répondre aux besoins des différents utilisateurs, cet article présentera comment améliorer l'expérience d'utilisation du téléphone mobile et ajuster la taille de la police du téléphone mobile grâce à des opérations simples. Pourquoi avez-vous besoin d'ajuster la taille de la police de votre téléphone mobile - L'ajustement de la taille de la police peut rendre le texte plus clair et plus facile à lire - Adapté aux besoins de lecture des utilisateurs d'âges différents - Pratique pour les utilisateurs malvoyants qui souhaitent utiliser la taille de la police fonction de configuration du système de téléphonie mobile - Comment accéder à l'interface des paramètres du système - Dans Rechercher et entrez l'option "Affichage" dans l'interface des paramètres - recherchez l'option "Taille de la police" et ajustez-la. application - téléchargez et installez une application prenant en charge l'ajustement de la taille de la police - ouvrez l'application et entrez dans l'interface des paramètres appropriée - en fonction de l'individu
Le secret de l'éclosion des œufs de dragon mobiles est révélé (étape par étape pour vous apprendre à réussir l'éclosion des œufs de dragon mobiles)
May 04, 2024 pm 06:01 PM
Les jeux mobiles font désormais partie intégrante de la vie des gens avec le développement de la technologie. Il a attiré l'attention de nombreux joueurs avec sa jolie image d'œuf de dragon et son processus d'éclosion intéressant, et l'un des jeux qui a beaucoup attiré l'attention est la version mobile de Dragon Egg. Pour aider les joueurs à mieux cultiver et faire grandir leurs propres dragons dans le jeu, cet article vous présentera comment faire éclore des œufs de dragon dans la version mobile. 1. Choisissez le type d'œuf de dragon approprié. Les joueurs doivent choisir soigneusement le type d'œuf de dragon qu'ils aiment et qui leur conviennent, en fonction des différents types d'attributs et de capacités d'œuf de dragon fournis dans le jeu. 2. Améliorez le niveau de la machine d'incubation. Les joueurs doivent améliorer le niveau de la machine d'incubation en accomplissant des tâches et en collectant des accessoires. Le niveau de la machine d'incubation détermine la vitesse d'éclosion et le taux de réussite de l'éclosion. 3. Collectez les ressources nécessaires à l'éclosion. Les joueurs doivent être dans le jeu.
Maîtrisez rapidement : comment ouvrir deux comptes WeChat sur les téléphones mobiles Huawei révélé !
Mar 23, 2024 am 10:42 AM
Dans la société actuelle, les téléphones portables sont devenus un élément indispensable de nos vies. En tant qu'outil important pour notre communication, notre travail et notre vie quotidienne, WeChat est souvent utilisé. Cependant, il peut être nécessaire de séparer deux comptes WeChat lors du traitement de différentes transactions, ce qui nécessite que le téléphone mobile prenne en charge la connexion à deux comptes WeChat en même temps. En tant que marque nationale bien connue, les téléphones mobiles Huawei sont utilisés par de nombreuses personnes. Alors, quelle est la méthode pour ouvrir deux comptes WeChat sur les téléphones mobiles Huawei ? Dévoilons le secret de cette méthode. Tout d'abord, vous devez utiliser deux comptes WeChat en même temps sur votre téléphone mobile Huawei. Le moyen le plus simple est de le faire.
Explication détaillée du fonctionnement de la division dans Oracle SQL
Mar 10, 2024 am 09:51 AM
Explication détaillée de l'opération de division dans OracleSQL Dans OracleSQL, l'opération de division est une opération mathématique courante et importante, utilisée pour calculer le résultat de la division de deux nombres. La division est souvent utilisée dans les requêtes de bases de données. Comprendre le fonctionnement de la division et son utilisation dans OracleSQL est donc l'une des compétences essentielles des développeurs de bases de données. Cet article discutera en détail des connaissances pertinentes sur les opérations de division dans OracleSQL et fournira des exemples de code spécifiques pour référence aux lecteurs. 1. Opération de division dans OracleSQL
La différence entre les méthodes et fonctions du langage Go et l'analyse des scénarios d'application
Apr 04, 2024 am 09:24 AM
La différence entre les méthodes et les fonctions du langage Go réside dans leur association avec des structures : les méthodes sont associées à des structures et sont utilisées pour faire fonctionner des données de structure ou des fonctions de méthodes sont indépendantes des types et sont utilisées pour effectuer des opérations générales ;
