前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《小白H5成长之路28》用CSS3和jQuery实现简单的右下角弹窗

《小白H5成长之路28》用CSS3和jQuery实现简单的右下角弹窗

作者头像
企鹅号小编
发布2018-02-27 10:34:31
1.8K0
发布2018-02-27 10:34:31
举报
文章被收录于专栏:企鹅号快讯

“小白,我们接着说CSS3动画的事情吧!今天上午你了解了一下关键帧keyframes,已经可以实现一些打开页面后自动执行的动画效果,现在我们试试通过jQuery动态给容器添加CSS3动画。”

“为什么要动态添加呢?”

“有时我们并不希望打开页面就执行一个动画,而是希望通过用户的点击或者鼠标移到某个元素上再触发对应的CSS3动画。你有没有发现,现在很多网站的图片鼠标移上去图片会稍微变大一点,鼠标移开后图片又会变回去,这些都是通过动态添加CSS3动画实现的。你能试着口头描述一下我刚说的图片效果是怎么实现的么?”

“我试试,稍等我思考一下!”

过了一会儿小白找到老朱说道:“我知道怎么实现的了,图片的父容器应该是固定宽度而且设置了超出隐藏属性(overflow:hidden),我们可以设定一个keyframes为a的关键帧宽度从100%变成110%,另一个keyframes为b的关键帧是宽度从110%编程100%,鼠标移到图片上后给图片添加a动画,鼠标移出以后b动画。可是怎么换动画我就不知道了,还请指教!”

“我先给你讲个其他例子,学会这个例子你就能联想出怎么做图片的动画效果了。上午我们调用keyframes是通过容器id添加css的animation属性实现的。同样我们还可以把animation通过class添加。比如现在我们要实现一个右下角弹层,弹层的功能可能是这样的:打开页面的时候弹层出现——点一下弹层后弹层消失——点一下页面中的按钮弹层再次出现,怎么实现呢?”

“首先我们得先设定弹层的样式,前两天我们刚刚学过position里的fixed定位,忘了的话可以重新复习一下下,现在我设定一下弹层的初始样式”

“小白!这里的CSS样式能看懂吧!”

小白回答道:“没问题,这都是最近常用的CSS属性,不过弹层既然在右下角,为何值设定了right为0,没有设定bottom为0呢?”

“别着急,bottom我会在class里面设定,现在我们先设定两个keyframes,一个是让tipDIV的bottom从-140变成0,另一个是让tipDIV的bottom从0变到140。”

这里略去了浏览器适配

“设完关键帧后现在写两个class”

这里同样略去了浏览器适配

“你现在想想,如果把tipDIV的class设成showstatus是不是这样一个效果:tipDIV默认bottom为0,执行gogogo动画(从-140px变为0),动画执行完毕后恢复初始状态,由于这里给tipDIV设置了bottom为0,所以初始状态bottom就是0。我们看看效果。”

小白看了这个效果之后马上说道:“我知道了,如果想要让他隐藏通过jQuery把tipDIV的class值改成hiddenstatus就可以了。你让我试试完善剩下的功能吧!”

“做好了,朱哥,你看看!页面加载完成以后我让弹层的class变成showstatus,鼠标点了弹层以后我又让弹层的class变为hiddenstatus,用户点了按钮后也会把弹层的class编程showstatus。”

“太棒了,小白你理解能力很强啊!那你现在去实现鼠标移到图片上的变化效果吧!”

“没问题,我已经知道怎么实现了!”

想学H5的朋友可以关注老炉,您的关注是我持续更新《小白HTML5成长之路》的动力!

本文来自企鹅号 - 无名码农媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文来自企鹅号 - 无名码农媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档