免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網站前端開發之Html+css+js實現動態層疊效果

2023-02-13    分類: 網站建設

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

網站前端開發1

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

前端開發代碼3

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

前端開發代碼2

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

前端展示效果

當鼠標懸浮到某一個li時,給與當前li設置一個最高的層級值(如:9999),當前li上面的所有li設置透明度(opacity)為0.3,鼠標離開時執行一遍level()方法重新設置一遍li的層級值。Js如圖:

前端開發代碼

新聞名稱:網站前端開發之Html+css+js實現動態層疊效果
文章路徑:http://m.newbst.com/news29/236729.html

成都網站建設公司_創新互聯,為您提供網頁設計公司移動網站建設靜態網站網站設計公司網站內鏈關鍵詞優化

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

綿陽服務器托管