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