Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan flip klik dengan jquery

Bagaimana untuk mencapai kesan flip klik dengan jquery

青灯夜游asal: 2022-05-16 14:40:342290semak imbas

Kaedah pelaksanaan: 1. Gunakan pernyataan "elemen object.click(function(){})" untuk mengikat acara klik pada elemen yang ditentukan dan menetapkan fungsi pemprosesan acara; tetapkan pernyataan "elemen Object.css("transform","rotateY(180deg)")" untuk mencapai kesan flip.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Cara mencapai kesan flip klik dengan jquery

1 Tetapkan acara klik

Gunakan klik () Ikat acara klik pada elemen dan tetapkan fungsi pemprosesan acara

<!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. Dalam fungsi pemprosesan acara, gunakan css() untuk menambah gaya flip pada elemen yang ditentukan

Kaedah

css() mengembalikan atau menetapkan satu atau lebih atribut gaya elemen yang dipadankan.

Gaya flip ialah "transform: rotateY(180deg)"

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

Bagaimana untuk mencapai kesan flip klik dengan jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, web Video bahagian hadapan】

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan flip klik dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery css function 对象事件 transform

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan gaya penyingkiran nod saudara dalam jqueryArtikel seterusnya：Bagaimana untuk melaksanakan gaya penyingkiran nod saudara dalam jquery

Artikel berkaitan

Lihat lagi