国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細

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

發(fā)表日期:2020-12-15 10:02:51   作者來源:嚴成   瀏覽:2937   標(biāo)簽:網(wǎng)站前端開發(fā)    
我們先來看看完成之后的效果圖如下:
 

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



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

前端開發(fā)代碼3



從圖可以看出,沒有設(shè)置層級z-index,因為如果通過css來設(shè)置層級,就需要設(shè)置每一個li的層級,一旦li過多,就需要設(shè)置過多z-index太不方便了,所以z-index需要通過js來設(shè)置。如圖:
 

前端開發(fā)代碼2



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

前端展示效果


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

前端開發(fā)代碼

如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://pdcharm.com/news/5924.html
临夏县| 河北区| 安达市| 贵德县| 察隅县| 阿拉尔市| 江华| 大埔区| 汝州市| 天祝| 上虞市| 大邑县| 胶州市| 田林县| 肇东市| 嘉荫县| 泰和县| 广饶县| 绍兴县| 同心县| 凤山县| 临颍县| 南城县| 沽源县| 泽库县| 高安市| 娱乐| 甘德县| 绥宁县| 兴山县| 和林格尔县| 明溪县| 江永县| 保定市| 九龙坡区| 金塔县| 武宣县| 紫阳县| 湖北省| 汉阴县| 二连浩特市|