jQuery实现点击滑出层效果代码示例

  • 内容
  • 评论
  • 相关

分享一段代码实例,它实现了点击滑出弹出层效果。

点击左上角的按钮,可以从上部以动画效果出现一个层效果,并且背景是半透明的。

代码实例如下:

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

上面的代码设置的是弹出层的容器。

设置元素绝对定位,并且left和right属性值为0,那么就是水平宽度全屏。

设置容器元素全透明。

并且top属性值是-10%

同事设置了动画过渡效果。

设置容器为不透明,并且top属性值为10%

这也就实现了弹出层渐现,并且从上面下滑效果。

$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。

为按钮注册click事件处理函数。

添加class样式类in。

设置容器的z-index值为1001,也就是可以悬浮于背景半透明层之上。

并显示背景半透明层。

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery实现点击滑出层效果代码示例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注