動(dòng)態(tài)改變div的z-index屬性的簡(jiǎn)單實(shí)例
更新時(shí)間：2013年08月08日 11:20:52 作者：
這篇文章介紹了動(dòng)態(tài)改變div的z-index屬性的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<script language="javascript">
var MAX_INDEX=4;
function change(ddd)
{
if(ddd.style.zIndex<= MAX_INDEX)
{
ddd.style.zIndex = MAX_INDEX+1;
MAX_INDEX++;
}
}
</script>
<div id="layer1" onclick="javascript:change(this);" style="position:absolute;margin-left:100;margin-top:50px;margin-=100;width=100;height=100;background-color:#ff0000;z-index:1"></div>
<div id="layer2" onclick="javascript:change(this);" style="position:absolute;margin-left:120;margin-top:60px;margin-=120;width=100;height=100;background-color:#00ff00;z-index:2"></div>
<div id="layer3" onclick="javascript:change(this);" style="position:absolute;margin-left:140;margin-top:70px;margin-=140;width=100;height=100;background-color:#0000ff;z-index:3"></div>
<div id="layer4" onclick="javascript:change(this);" style="position:absolute;margin-left:160;margin-top:80px;margin-=160;width=100;height=100;background-color:#000000;z-index:4"></div>
您可能感興趣的文章:
- javascript 動(dòng)態(tài)改變層的Z-INDEX的代碼style.zIndex
- jQuery獲取css z-index在各種瀏覽器中的返回值
- JQuery UI DatePicker中z-index默認(rèn)為1的解決辦法
- vue樣式疊層z-index不起作用的解決方案
- 關(guān)于微信小程序map組件z-index的層級(jí)問(wèn)題分析
- 推薦深入理解css中的position定位和z-index屬性
- Webpack打包c(diǎn)ss后z-index被重新計(jì)算的解決方法
- js實(shí)現(xiàn)輪播圖效果 z-index實(shí)現(xiàn)輪播圖
- 深入理解z-index的工作原理和應(yīng)用技巧
相關(guān)文章
javascript alert亂碼的解決方法2013-11-11
JavaScript 隱式類(lèi)型轉(zhuǎn)換規(guī)則詳解
這篇文章主要為大家介紹了JavaScript 隱式類(lèi)型轉(zhuǎn)換規(guī)則詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2023-05-05
JavaScript打開(kāi)word文檔的實(shí)現(xiàn)代碼(c#)
在C#中打開(kāi)word文檔其實(shí)不算太難，方法也比較多,用javascript怎么打開(kāi)呢？其實(shí)，也不難2012-04-04
JavaScript實(shí)現(xiàn)的級(jí)聯(lián)算法示例【省市二級(jí)聯(lián)動(dòng)功能】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的級(jí)聯(lián)算法,結(jié)合省市二級(jí)聯(lián)動(dòng)下拉菜單功能實(shí)例分析了javascript事件響應(yīng)與元素動(dòng)態(tài)操作實(shí)現(xiàn)級(jí)聯(lián)算法的相關(guān)技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了JS原型和原型鏈原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了js原型和原型鏈概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
簡(jiǎn)單了解Ajax表單序列化的實(shí)現(xiàn)方法
這篇文章主要介紹了簡(jiǎn)單了解Ajax表單序列化的實(shí)現(xiàn)方法,隨著Ajax的出現(xiàn)，表單序列化已經(jīng)成為一種需求,在學(xué)習(xí)原生Ajax時(shí),若用POST方法向后臺(tái)提交數(shù)據(jù)時(shí),就需要將表單序列化,需要的朋友可以參考下2019-06-06
使用腳本控制網(wǎng)頁(yè)Table的顯示隱藏(全代碼)_AX
使用腳本控制網(wǎng)頁(yè)Table的顯示隱藏(全代碼)_AX...2006-12-12
通常在開(kāi)發(fā)測(cè)試環(huán)節(jié)，一些資源圖片會(huì)出現(xiàn)防盜鏈的錯(cuò)誤提示，本文就通過(guò)前端基礎(chǔ)技術(shù)，實(shí)現(xiàn)基本的圖片跨站顯示效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
動(dòng)態(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05