网站前端开发之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实现动态层叠效果
文章路径：https://www.cdcxhl.com/news29/236729.html

成都网站建设公司_创新互联，为您提供网页设计公司、移动网站建设、静态网站、网站设计公司、网站内链、关键词优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容