Comment créer un div mobile en utilisant JavaScript ?

Un div mobile est un élément Web qui peut automatiquement se déplacer sur l'écran ou changer de position sur l'écran. Modifiez la position en ajustant les propriétés de style gauche et supérieur. Créer un div mobile à l'aide de JavaScript est une tâche relativement simple. Tout ce qu'il faut, c'est un peu de code HTML, CSS et JavaScript. Dans ce didacticiel, nous allons vous montrer comment créer un div mobile à l'aide de JavaScript.

Code HTML

La première chose dont nous avons besoin est du code HTML. Nous allons créer un identifiant comme "Déplacer la division". À l’intérieur de cette division, nous placerons du contenu. Ce contenu peut provenir de votre Je veux, mais pour cet exemple, ajoutons simplement du texte.

<div id="movingDiv"> This is my moving div! </div>

Maintenant que nous avons le code HTML, nous avons besoin de code CSS.

Code CSS

Le code CSS fera réellement bouger notre div. Nous allons définir la position du div aux « parents ». Cela nous permettra de déplacer le div en utilisant JavaScript. Nous fixerons également La largeur et la hauteur du div.

#movingDiv { position: relative; width: 200px; height: 200px; }

Maintenant que nous avons le code HTML et CSS, nous avons besoin de code JavaScript.

Code JavaScript

Le code JavaScript fera réellement bouger notre div. Nous utiliserons la fonction setInterval pour déplacer le div toutes les 1000 millisecondes (1 seconde). Nous utiliserons également les propriétés CSS "top" et "left" pour déplacer le div.

var interval = setInterval(function() {
   var div = document.getElementById("movingDiv");
   div.style.top = div.offsetTop + 1 + "px";
   div.style.left = div.offsetLeft + 1 + "px"; },
   1000);

Exemple

Voici le code de fonctionnement complet de cet exemple -

   


   <div id="movingDiv"> This is my moving div! </div>
   <script>
      var interval = setInterval(function() {
      var div = document.getElementById("movingDiv");
      div.style.top = div.offsetTop + 1 + "px";
      div.style.left = div.offsetLeft + 1 + "px"; },
      1000);
   </script>

Explication ligne par ligne du code ci-dessus -

• Ligne 1 - On commence par créer un document HTML.

• Ligne 3 - Nous créons un élément de tête.

• Ligne 4 - Nous créons un élément de style. Dans cet élément de style, nous placerons notre code CSS.

• Ligne 5 - Nous créons une règle CSS pour notre div avec l'identifiant "MoveDiv". Nous définissons l'emplacement sur "relatif". Nous définissons également la largeur et la hauteur du div.

• Ligne 12 − Nous créons un élément body. À l'intérieur de cet élément body, nous mettrons notre code HTML.

• Ligne 13 − Nous créons un div avec un identifiant de "movingDiv". . À l'intérieur de ce div, nous mettons du texte.

• Ligne 14 − Nous créons un élément de script, à l'intérieur de cet élément de script, nous mettrons notre code JavaScript.

• Ligne 15 − Nous créons une variable appelée "interval". Nous définissons cette variable sur la fonction setInterval Cette fonction déplacera notre div toutes les 1000 millisecondes (1 seconde).

• . Ligne 16 − Nous créons une variable appelée "div". Nous définissons cette variable sur l'élément HTML avec un identifiant de "movingDiv".

• Ligne 17 − Nous utilisons la propriété CSS "top" pour déplacer notre div vers le bas de 1 pixel.

• Ligne 18 − Nous utilisons la propriété CSS "left" pour déplacer notre div vers la droite de 1 pixel.

• Ligne 22 − Nous terminons notre HTML document.

Dans ce tutoriel, nous avons expliqué comment créer un div mobile à l'aide de JavaScript. Nous avons commencé. En créant du code HTML. Ensuite, nous avons créé du code CSS. Enfin, nous avons créé quelques Code JavaScript.

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!