• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

jQuery 程序员 2年前 (2019-01-23) 123次浏览 已收录 0个评论

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

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

代码实例如下:

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

一.代码注释:

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

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

设置容器元素全透明。

并且top属性值是-10%

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

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

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

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

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

添加class样式类in。

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

并显示背景半透明层。


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址