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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2016-05-16 15:37:18

asal

1202 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.