我们先来看看完成之后的效果图如下:
![网站前端开发1](/upload/pic19/100325dpscYf.jpg)
Html的部分就不多说了,使用5个<li>标签来排版。从效果图可以看出来,从最上面一层(1)开始到最下面一层(5)每一层都像悬浮在下一层上面(除5外),主要使用了css的定位属性(position:relative;)、层级属性(z-index)、外边距(margin-top)、外阴影(box-shadow)、旋转(transform:rotate())。Css如图:
![前端开发代码3](/upload/pic19/100405JAJr8s.jpg)
从图可以看出,没有设置层级z-index,因为如果通过css来设置层级,就需要设置每一个li的层级,一旦li过多,就需要设置过多z-index太不方便了,所以z-index需要通过js来设置。如图:
![前端开发代码2](/upload/pic19/100430fKRTiy.jpg)
先获取li的总个数然后赋值给c_Size,通过for循环设置i的初始值为0,每循环一次i的值加1,i的值为li的下标,s的值为层级(z-index)的值,而s的值为每次循环c_Size减i的值得出,从而li的层级从上到下是递减的,最高值是5,最低值是1。
鼠标悬浮的效果:
![前端展示效果](/upload/pic19/100443rMFhrT.jpg)
当鼠标悬浮到某一个li时,给与当前li设置一个最高的层级值(如:9999),当前li上面的所有li设置透明度(opacity)为0.3,鼠标离开时执行一遍level()方法重新设置一遍li的层级值。Js如图:
![前端开发代码](/upload/pic19/100453DmwNEs.jpg)
新闻名称:网站前端开发之Html+css+js实现动态层叠效果
文章路径:https://www.cdcxhl.com/news29/236729.html
成都网站建设公司_创新互联,为您提供网页设计公司、移动网站建设、静态网站、网站设计公司、网站内链、关键词优化
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联