recherche

Maison >interface Web >Questions et réponses frontales >Comment obtenir un effet click flip avec jquery

Comment obtenir un effet click flip avec jquery

青灯夜游
青灯夜游original
2022-05-16 14:40:342364parcourir

Méthode d'implémentation : 1. Utilisez l'instruction "element object.click(function(){})" pour lier l'événement de clic à l'élément spécifié et définissez la fonction de traitement d'événement. 2. Dans la fonction de traitement, définissez l'"élément ; object.css( "transform","rotateY(180deg)")" pour obtenir l'effet de retournement.

Comment obtenir un effet click flip avec jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Comment obtenir un effet de retournement de clic avec jquery

1 Définissez l'événement de clic

Utilisez click() pour lier l'événement de clic à l'élément et définissez la fonction de traitement d'événement

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.block {
			  width: 200px;
			  height: 200px;
			  background: brown;
			  cursor: pointer;
			  transition: 0.8s;
			}
		</style>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					//点击事件发生后，执行的代码
				});
			});
		</script>
	</head>
	<body>
		<div class="block"></div><br>
		<button>翻转元素</button>
	</body>
</html>

2. Dans la fonction de traitement d'événements, utilisez css() pour ajouter un style inversé à l'élément spécifié. La méthode css() renvoie ou définit un ou plusieurs attributs de style de l'élément correspondant.

Le style flip est "

"

$(document).ready(function() {
	$("button").click(function() {
		$("div").css("transform","rotateY(180deg)");
	});
});

transform: rotateY(180deg)

[Apprentissage recommandé : Comment obtenir un effet click flip avec jqueryTutoriel vidéo jQuery

,

Vidéo web front-end]

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!

jquery css function 对象 事件 transform
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 implémenter le style de suppression de nœud frère dans jqueryArticle suivant：Comment implémenter le style de suppression de nœud frère dans jquery

Articles Liés

Voir plus