網(wǎng)站前端開發(fā)之Html+css+js實(shí)現(xiàn)動(dòng)態(tài)層疊效果

2023-02-13 分類：網(wǎng)站建設(shè)

我們先來(lái)看看完成之后的效果圖如下：

網(wǎng)站前端開發(fā)1

Html的部分就不多說(shuō)了，使用5個(gè)<li>標(biāo)簽來(lái)排版。從效果圖可以看出來(lái)，從最上面一層（1）開始到最下面一層（5）每一層都像懸浮在下一層上面（除5外），主要使用了css的定位屬性（position:relative;）、層級(jí)屬性（z-index）、外邊距（margin-top）、外陰影（box-shadow）、旋轉(zhuǎn)（transform:rotate()）。Css如圖：

前端開發(fā)代碼3

從圖可以看出，沒(méi)有設(shè)置層級(jí)z-index，因?yàn)槿绻ㄟ^(guò)css來(lái)設(shè)置層級(jí)，就需要設(shè)置每一個(gè)li的層級(jí)，一旦li過(guò)多，就需要設(shè)置過(guò)多z-index太不方便了，所以z-index需要通過(guò)js來(lái)設(shè)置。如圖：

前端開發(fā)代碼2

先獲取li的總個(gè)數(shù)然后賦值給c_Size，通過(guò)for循環(huán)設(shè)置i的初始值為0，每循環(huán)一次i的值加1，i的值為li的下標(biāo)，s的值為層級(jí)（z-index）的值，而s的值為每次循環(huán)c_Size減i的值得出，從而li的層級(jí)從上到下是遞減的，最高值是5，最低值是1。
鼠標(biāo)懸浮的效果：

前端展示效果

當(dāng)鼠標(biāo)懸浮到某一個(gè)li時(shí)，給與當(dāng)前l(fā)i設(shè)置一個(gè)最高的層級(jí)值（如：9999），當(dāng)前l(fā)i上面的所有l(wèi)i設(shè)置透明度（opacity）為0.3，鼠標(biāo)離開時(shí)執(zhí)行一遍level()方法重新設(shè)置一遍li的層級(jí)值。Js如圖：

前端開發(fā)代碼

新聞名稱：網(wǎng)站前端開發(fā)之Html+css+js實(shí)現(xiàn)動(dòng)態(tài)層疊效果
文章路徑：http://jinyejixie.com/news29/236729.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

網(wǎng)站前端開發(fā)之Html+css+js實(shí)現(xiàn)動(dòng)態(tài)層疊效果