recherche

Maison >interface Web >js tutoriel >Méthode JS pour implémenter trois couches de clics qui se chevauchent pour basculer entre elles_compétences javascript

Méthode JS pour implémenter trois couches de clics qui se chevauchent pour basculer entre elles_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:37:181165parcourir

L'exemple de cet article décrit la méthode d'utilisation de JS pour basculer entre trois couches en superposant des clics. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Cet effet implémente trois calques superposés ou plus, qui se chevauchent selon certaines règles. Lorsque vous cliquez sur n'importe quel calque avec la souris, le calque est affiché en haut et plusieurs calques sont commutés alternativement. Le code est simple et vous. peut apprendre en même temps. CSS est également un bon exemple de référence. La fonction de cet exemple nécessite du code JavaScript.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

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

J'espère que cet article sera utile à la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter les lignes de la table jQuery vers le haut, vers le bas et vers top_jqueryArticle suivant：Comment implémenter les lignes de la table jQuery vers le haut, vers le bas et vers top_jquery

Articles Liés

Voir plus