Heim > Artikel > Web-Frontend > So erzielen Sie mit jquery einen Click-Flip-Effekt

So erzielen Sie mit jquery einen Click-Flip-Effekt

青灯夜游Original: 2022-05-16 14:40:342214Durchsuche

Implementierungsmethode: 1. Verwenden Sie die Anweisung „element object.click(function(){})“, um das Klickereignis an das angegebene Element zu binden und die Ereignisverarbeitungsfunktion festzulegen. 2. Legen Sie in der Verarbeitungsfunktion das „element“ fest object.css( „transform“, „rotateY(180deg)“)“-Anweisung, um den Flip-Effekt zu erzielen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

So erzielen Sie einen Click-Flip-Effekt mit jquery

1. Legen Sie das Klickereignis fest

Verwenden Sie click(), um das Klickereignis an das Element zu binden und die Ereignisverarbeitungsfunktion festzulegen

<!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. Verwenden Sie in der Ereignisverarbeitungsfunktion css(), um dem angegebenen Element einen Flip-Stil hinzuzufügen. Die Methode css() gibt ein oder mehrere Stilattribute des übereinstimmenden Elements zurück oder legt sie fest.

Der Flip-Stil ist „

“

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

transform: rotateY(180deg)

[Empfohlenes Lernen: So erzielen Sie mit jquery einen Click-Flip-Effekt jQuery-Video-Tutorial

Web-Frontend-Video]

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit jquery einen Click-Flip-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css function 对象事件 transform

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie den Stil zum Entfernen von Geschwisterknoten in JQueryNächster Artikel：So implementieren Sie den Stil zum Entfernen von Geschwisterknoten in JQuery

In Verbindung stehende Artikel

Mehr sehen