Heim > Artikel > Web-Frontend > So erzielen Sie mit jquery einen Click-Flip-Effekt
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: 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!