网站前端开辟之Html+css+js完成静态层叠结果
2022-03-05 品牌网站公司
我们先来看看完成以后的效果图以下：
Html的部分就不多说了，应用5个
标签来排版。从效果图能够看出来，从最下面一层(1)起头到最下面一层(5)每层都像悬浮鄙人一层下面(除5外)，重要应用了css的定位属性(position: relative;)、层级属性(z-index)、外边距(margin-top)、外暗影(box-shadow)、扭转(transform: rotate())。Css如图：
从图能够看出，没有设置层级z-index，因为假定经由过程css来设置层级，品牌网站公司，就需要设置每一个li的层级，一旦li过量，就需要设置过量z-index太未便利了，以是z-index需要经由过程js来设置。如图：
先获得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如图：