Das Beispiel in diesem Artikel beschreibt die Methode, mit JS durch überlappende Klicks zwischen drei Ebenen zu wechseln. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dieser Effekt implementiert drei oder mehr überlappende Ebenen, die sich nach bestimmten Regeln überlappen. Wenn Sie mit der Maus auf eine beliebige Ebene klicken, wird die Ebene oben angezeigt und mehrere Ebenen werden abwechselnd umgeschaltet. Der Code ist einfach und Sie kann gleichzeitig lernen. CSS ist auch ein gutes Referenzbeispiel. Die Funktion dieses Beispiels erfordert JavaScript-Code.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/js-3ccd-tab-click-cha-style-codes/
Der spezifische Code lautet wie folgt:
<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>
Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.
