中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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

我們先來看看完成之后的效果圖如下:

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

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

前端開發(fā)代碼3

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

前端開發(fā)代碼2

先獲取li的總個(gè)數(shù)然后賦值給c_Size,通過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://www.rwnh.cn/news29/236729.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(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í)需注明來源: 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管
册亨县| 榆中县| 衡东县| 大悟县| 铁岭县| 福海县| 英超| 格尔木市| 广州市| 钦州市| 新闻| 商丘市| 连南| 澎湖县| 塔河县| 巴林左旗| 苍梧县| 小金县| 东明县| 益阳市| 文昌市| 自贡市| 左权县| 平舆县| 通渭县| 满洲里市| 冕宁县| 谢通门县| 登封市| 马尔康县| 左云县| 沧州市| 卢龙县| 贵德县| 平利县| 蒲城县| 湘乡市| 公主岭市| 霍山县| 渭源县| 武陟县|