ホームページ >ウェブフロントエンド >jsチュートリアル >クリックを重ねて 3 つのレイヤーを実装して相互に切り替える JS メソッド_JavaScript スキル
クリックを重ねて 3 つのレイヤーを実装して相互に切り替える JS メソッド_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:37:181172ブラウズ
この記事の例では、JS を使用してクリックを重ねることで 3 つのレイヤーを切り替える方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。
このエフェクトは、3つ以上のレイヤーを一定の規則に従って重ね合わせて実装しており、任意のレイヤーをマウスでクリックすると、そのレイヤーが一番上に表示され、複数のレイヤーが交互に切り替わります。 CSS も同時に学習できます。この例の関数には JavaScript コードが必要です。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-3ccd-tab-click-cha-style-codes/
具体的なコードは次のとおりです:
<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>
この記事が皆さんの JavaScript プログラミングに役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。