快捷導(dǎo)航

JavaScript實(shí)現(xiàn)多個(gè)重疊層點(diǎn)擊切換效果的方法

更新時(shí)間：2015年04月24日 12:17:34 作者：休閑生活文化

這篇文章主要介紹了JavaScript實(shí)現(xiàn)多個(gè)重疊層點(diǎn)擊切換效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)點(diǎn)擊切換效果的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)多個(gè)重疊層點(diǎn)擊切換效果的方法。分享給大家供大家參考。具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三個(gè)層重疊，點(diǎn)擊可切換</title>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
function change(n){
for (var i=1;i<4;i++){
if(n==i){
$("a"+i).style.zIndex="100";
}else{
$("a"+i).style.zIndex="0";
}
}
}
</script>
</head>
<body>
<div id="a1" 
style="position:absolute;left:100px;top:100px;width:100px;height:100px;
background-color:#ddeeff;z-index:1" onclick="change('1')" >
</div>
<div id="a2" 
style="position:absolute;left:150px;top:130px;width:100px;height:100px;
background-color:#eeffdd;z-index:2" onclick="change('2')">
</div>
<div id="a3" 
style="position:absolute;left:200px;top:160px;width:100px;height:100px;
background-color:#ffddee;z-index:3" onclick="change('3')">
</div>
<div>http://www.fzitv.net/</div>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS使用new操作符創(chuàng)建對象的方法分析
這篇文章主要介紹了JS使用new操作符創(chuàng)建對象的方法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)類的定義、new操作符對象的創(chuàng)建及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-05-05
js移動端圖片壓縮上傳功能
這篇文章主要為大家詳細(xì)介紹了js移動端圖片壓縮上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
無語，javascript居然支持中文(unicode)編程！
無語，javascript居然支持中文(unicode)編程！...
2007-04-04
JS正則表達(dá)式常見函數(shù)與用法小結(jié)
這篇文章主要介紹了JS正則表達(dá)式常見函數(shù)與用法,結(jié)合實(shí)例形式分析了JS正則表達(dá)式基本功能、常見函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下
2020-04-04
js實(shí)現(xiàn)常用排序算法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)常用排序算法的代碼，感興趣的小伙伴們可以參考一下
2016-08-08
ES7之Async/await的使用詳解
這篇文章主要介紹了ES7之Async/await的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
學(xué)習(xí)drag and drop js實(shí)現(xiàn)代碼經(jīng)典之作
今天讀John Resig的Pro Javascript Techniques時(shí)候看到他書上給的一個(gè)關(guān)于drag and drop的例子, 合上書本自己寫一個(gè)簡化版本的。大約20分鐘完成，沒有考慮兼容firefox。整個(gè)代碼封裝成一個(gè)對象也是借鑒書中的風(fēng)格。我覺得很好。
2009-04-04
JavaScript最少知識原則介紹與體現(xiàn)
最少知識原則（LKP）說的是一個(gè)軟件實(shí)體應(yīng)當(dāng)盡可能少地與其他實(shí)體發(fā)生相互作用。這里的軟件實(shí)體是一個(gè)廣義的概念，不僅包括對象，還包括系統(tǒng)、類、模塊、函數(shù)、變量等
2022-08-08
使用Microsoft Ajax Minifier減小JavaScript文件大小的方法
大家用來減小JavaScript文件下載大小的常見的方式有2種：壓縮（compression）和縮?。╩inification）。
2010-04-04
javascript實(shí)現(xiàn)別踩白塊兒小游戲程序
我們先看到的未開始的頁面黑色和白色方塊是隨機(jī)生成的，完了這么多把沒有發(fā)現(xiàn)時(shí)固定不變的。點(diǎn)擊一次方塊，程序需要判斷是黑色還是白色的。如果是黑色的，當(dāng)然程序也是實(shí)現(xiàn)了一次自減，在動畫中是實(shí)現(xiàn)一次下移的，下移的時(shí)候點(diǎn)擊的方塊到黃顏色的區(qū)域會變成灰色
2015-11-11