Maison > Article > interface Web > javascript change la position de l'image

javascript change la position de l'image

PHPzoriginal: 2023-05-06 09:23:061207parcourir

Avec l'application généralisée d'Internet et des appareils mobiles, les besoins de la conception Web deviennent de plus en plus diversifiés. L'interactivité et la réponse dynamique sont devenues des orientations importantes dans la conception Web. Il est souvent nécessaire d'utiliser des effets dynamiques dans les pages Web pour augmenter l'intérêt des pages. Parmi eux, changer la position de l’image est un effet courant. Cet article explique comment utiliser JavaScript pour obtenir l'effet de changer la position de l'image.

1. Comprendre JavaScript

JavaScript est un langage de script utilisé pour ajouter des effets interactifs aux pages Web. À l'aide de JavaScript, vous pouvez modifier dynamiquement le style, les attributs et le contenu des éléments HTML d'une page Web sans recharger la page entière. Étant donné que JavaScript peut facilement exploiter HTML et CSS, l'utilisation de JavaScript dans la conception Web peut obtenir des détails fins et augmenter l'expérience interactive de l'utilisateur.

2. Changer la position de l'image

Changer la position de l'image est une fonction très basique en JavaScript. Sur la page, nous devons souvent modifier dynamiquement la position des images pour obtenir des effets visuels spéciaux.

Ce qui suit est un morceau de code qui utilise JavaScript pour changer la position de l'image :

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
  position: absolute;
  left: 0px;
  top: 0px;
}
</style>
</head>
<body>

<h2>JavaScript改变图片位置</h2>

<img id="myImg" src="img.jpg" width="100" height="100">

<p>Klicken Sie auf die Schaltfläche, um das Bild nach rechts zu bewegen:</p>

<button onclick="moveRight()">Rechts bewegen</button>

<script>
function moveRight() {
  var img = document.getElementById("myImg");
  var xpos = img.offsetLeft;
  img.style.left = xpos + 10 + "px";
}
</script>

</body>
</html>

Dans le code ci-dessus, nous utilisons l'attribut position de CSS pour contrôler la position de l'image et l'attribut offsetLeft de JavaScript Obtenez la distance entre l'image et l'élément parent (c'est-à-dire le côté gauche de la page) et modifiez sa valeur de gauche via style.left, modifiant ainsi la position de l'image.

3. Plus de façons de changer la position de l'image

Changer le taux de zoom de l'image

En plus de modifier la taille de la position de l'image, en utilisant JavaScript, vous pouvez également modifier le taux de zoom de l'image pour agrandir ou réduire l'image. Voici un exemple de modification du rapport de mise à l'échelle de l'image :

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
  width: 100px;
  height: 100px;
  transition: all 0.5s ease;
}
</style>
</head>
<body>

<h2>JavaScript改变图片缩放比例</h2>

<img id="myImg" src="img.jpg">

<p>Klicken Sie auf das Bild, um es zu vergrößern:</p>

<script>
document.getElementById("myImg").onclick = function() {myFunction()};

function myFunction() {
  var img=document.getElementById("myImg");
  if (img.style.width==="100px"){
    img.style.width="200px";
    img.style.height="200px";
  } else {
    img.style.width="100px";
    img.style.height="100px";
  } 
}
</script>

</body>
</html>

Dans le code ci-dessus, nous obtenons la mise à l'échelle de l'image en modifiant les attributs de largeur et de hauteur de l'image, et en même temps en utilisant l'attribut de transition en CSS pour rendre le changement d'image plus fluide.

Effet de glissement d'image

En plus de changer la position et la mise à l'échelle de l'image, nous pouvons également obtenir l'effet de glissement de l'image grâce JavaScript. Sur la page Web, nous pouvons déplacer la position de l'image en la faisant glisser avec la souris.

Ce qui suit est un code pour obtenir l'effet glisser-déposer de l'image :

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
  position: absolute;
  left: 0px;
  top: 0px;
}
</style>
</head>
<body>

<h2>JavaScript实现图片拖拽效果</h2>

<img id="myImg" src="img.jpg" width="100" height="100" onmousedown="dragElement(this)">

<script>
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>

Dans le code ci-dessus, nous utilisons les événements mousedown, mousemove et mouseup de la souris pour obtenir l'effet glisser-déposer, parmi lesquels, L'événement mousedown déclenche la fonction elementDrag de l'élément, qui modifie les attributs gauche et supérieur de l'élément pendant le mouvement de l'élément.

4. Résumé

Voici quelques méthodes courantes d'utilisation de JavaScript pour modifier la position des images. En comprenant ces méthodes, nous pouvons utiliser JavaScript de manière plus flexible pour implémenter la conception Web. .effet dynamique. Dans le même temps, lorsque vous utilisez JavaScript, vous devez prêter attention aux problèmes de compatibilité et de performances pour garantir que les pages Web peuvent fonctionner correctement sur différents navigateurs et appareils.

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!

JavaScript css html 事件 position transition

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment optimiser les chaînes javascriptArticle suivant：Comment optimiser les chaînes javascript

Articles Liés

Voir plus