Heim > Artikel > Web-Frontend > JS-Methode zum Implementieren dreier Schichten überlappender Klicks zum Umschalten zwischen den Javascript-Fähigkeiten

JS-Methode zum Implementieren dreier Schichten überlappender Klicks zum Umschalten zwischen den Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:37:181119Durchsuche

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie jQuery-Tabellenzeilen nach oben, unten und nach oben_jqueryNächster Artikel：So implementieren Sie jQuery-Tabellenzeilen nach oben, unten und nach oben_jquery

In Verbindung stehende Artikel

Mehr sehen