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

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

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

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

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

    前端開發(fā)代碼3

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

    前端開發(fā)代碼2

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

    前端展示效果

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

    前端開發(fā)代碼

    本文標題：網(wǎng)站前端開發(fā)之Html+css+js實現(xiàn)動態(tài)層疊效果
    轉(zhuǎn)載源于：http://muchs.cn/news/236729.html

    成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、做網(wǎng)站、網(wǎng)站排名、Google、外貿(mào)建站、網(wǎng)站導航

    廣告

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

    • 成都app開發(fā)公司