JS實現(xiàn)三個層重疊點擊互相切換的方法
更新時間：2015年10月06日 11:27:47 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)三個層重疊點擊互相切換的方法,涉及JavaScript動態(tài)操作頁面定位屬性的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)三個層重疊點擊互相切換的方法。分享給大家供大家參考。具體如下：
該效果實現(xiàn)三個或多個重疊層，按一定規(guī)則重疊在一起，當(dāng)你用鼠標(biāo)點擊任意層的時候，該層被顯示在最上部，多個層交替切換，代碼簡單，同時學(xué)習(xí)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>三個或多個層重疊實現(xiàn)互相切換</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程序設(shè)計有所幫助。
相關(guān)文章
在微信小程序的開發(fā)中,經(jīng)常會有列表分類標(biāo)簽隨著界面滾動吸頂?shù)男Ч?下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)吸頂效果的相關(guān)資料,需要的朋友可以參考下2021-08-08
JS實現(xiàn)超精簡響應(yīng)鼠標(biāo)顯示二級菜單代碼
這篇文章主要介紹了JS實現(xiàn)超精簡響應(yīng)鼠標(biāo)顯示二級菜單代碼,可實現(xiàn)針對鼠標(biāo)事件的響應(yīng)動態(tài)修改頁面元素屬性的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
JavaScript?算法實現(xiàn)復(fù)寫0雙指針解法
這篇文章主要為大家介紹了JavaScript?算法?復(fù)寫0雙指針解法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
canvas有一個神奇的方法getImageData，它可以獲取canvas內(nèi)圖像的每一個像素點的顏色值獲取，而且可以改變。本文將對canvas實現(xiàn)圖片的濾鏡轉(zhuǎn)化的方法進行介紹，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了Js跳出兩級循環(huán)方法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
控制控件只能輸入數(shù)字,含-(負號).(小數(shù)點)2009-07-07
最近在使用clipboard.js碰到的一個小問題，通過查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
微信小程序?qū)崿F(xiàn)聊天對話(文本、圖片)功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)聊天對話功能，可以發(fā)送文本、圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript實現(xiàn)給浮點數(shù)添加千分位逗號的多種方法
JavaScript 是一門強大的前端語言,在處理數(shù)值格式化時提供了多種方法,在開發(fā)過程中,我們經(jīng)常需要將大數(shù)字格式化,使其更具可讀性,例如,將 12000000.11 轉(zhuǎn)換為 12,000,000.11,本文將詳細介紹 JavaScript 中如何實現(xiàn)這種格式化,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了javascript事件冒泡實原理,實例分析了事件冒泡的定義及實現(xiàn)技巧,需要的朋友可以參考下2015-05-05