Rumah > hujung hadapan web > tutorial js > Kaedah JS untuk melaksanakan tiga lapisan klik bertindih untuk bertukar antara satu sama lain_javascript kemahiran

Kaedah JS untuk melaksanakan tiga lapisan klik bertindih untuk bertukar antara satu sama lain_javascript kemahiran

WBOY
Lepaskan: 2016-05-16 15:37:18
asal
1173 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah menggunakan JS untuk bertukar antara tiga lapisan dengan klik bertindih. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kesan ini melaksanakan tiga atau lebih lapisan bertindih, yang bertindih mengikut peraturan tertentu Apabila anda mengklik pada mana-mana lapisan dengan tetikus, lapisan dipaparkan di bahagian atas dan berbilang lapisan ditukar secara bergilir-gilir boleh belajar pada masa yang sama CSS juga merupakan contoh rujukan yang baik Fungsi contoh ini memerlukan kod JavaScript.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-3ccd-tab-click-cha-style-codes/

Kod khusus adalah seperti berikut:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三个或多个层重叠实现互相切换</title>
</head>
<body>
<div id="aaa" style="position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#ddeeff;z-index:1;" onclick="moveUp(this.id)"></div>
<div id="bbb" style="position:absolute;left:150px;top:130px;width:100px;height:100px;background-color:#eeffdd;z-index:2;" onclick="moveUp(this.id)"></div>
<div id="ccc" style="position:absolute;left:200px;top:160px;width:100px;height:100px;background-color:#ffddee;z-index:3;" onclick="moveUp(this.id)"></div>
<script type="text/javascript">
var divNo = document.getElementsByTagName("div").length;
function moveUp(id)
{
divNo++;
var box = document.getElementById(id);
box.style.zIndex=divNo;
}
</script>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan