Comment faire tourner votre image en continu en JavaScript

Posté Par: Windows2022tutosur: janvier 11, 2023Dans: TechPas De Commentaires

Comment faire tourner votre image en continu en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment faire tourner votre image en continu en JavaScript. Ce tutoriel a pour but de vous permettre de faire pivoter votre image affichée. Cela couvrira toutes les fonctions de base qui permettront de rechercher une liste. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé sur n’importe quel système si vous souhaitez ajouter une animation à votre image. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Rotation d’image. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que l’image et le bouton. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
			#image {
				animation: rotation 1s linear 0s infinite;
				animation-play-state: paused;
			}
 
			@keyframes rotation {
				to {
					transform: rotate(360deg)
				}
			}

  


	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a href=" class="navbar-brand">Sourcecodester</a> 
	<div class="col-md-6 well">
		<h3 class="text-primary">How to make your Image Spin Continuously</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<button class="btn btn-default" onclick="rotateImage(this);">Spin</button>
		<img style="margin:20px;" src="wheel.png" id="image" height="400px" width="400px"/>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code fera tourner dynamiquement votre image en continu lorsque vous cliquez dessus. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

function rotateImage(val) {
  let image = document.getElementById("image");
	if (image.style.webkitAnimationPlayState == "running") {
		image.style.webkitAnimationPlayState = "paused";
		val.innerHTML="Spin";
	} else {
		image.style.webkitAnimationPlayState = "running";
		val.innerHTML="Stop";
	}
}

Le code est très simple et direct, pour que nous puissions faire tourner l’image, nous allons d’abord utiliser une méthode appelée rotationImage(). Cette fonction déclenchera l’événement après avoir cliqué sur le bouton. Dans ce code, nous modifions simplement le contrôle d’animation de l’image en modifiant l’état de l’image

Sortir:

Les Comment faire tourner votre image en continu en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment faire tourner votre image en continu en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici