《小白HTML5成长之路35》再做一个顶部的提示信息

最近天气干燥,小白和老朱都感冒了,虽然状态不好,小白还是没有停止HTML5前进的脚步,他憋了一股劲一定要在2018年到来之前提高一个台阶。看到老朱来到办公室,小白赶紧凑过去:“朱哥,再来点新东西吧!”

老朱哑着嗓子说道:“你先试着把昨天的弹窗增加一个出现的动画吧,正好熟悉一下CSS3动画。”

小白:“消失的动画用不用做?”

“消失先不用做,消失我们用了remove直接移除了弹窗容器,就算加上css3动画也显示不出来,这块功能我们以后有时间再说。弹窗控件以后你肯定会经常使用,你可以根据以后的需求慢慢完善它。”

“好吧!那我先把CSS3动画加上。”

小白做好以后找到老朱说道:“我给中间的弹窗添加了一个透明度从0变到1的过程,宽度也做了变化。背景添加了一个透明度从0变到0.5的过程。你看一下效果。”

“好的!弹窗就先这样吧!以后慢慢完善。既然我们已经做了一个简单的弹窗控件,是不是在这个基础上还能做一个顶部提示信息的控件?顶部提示信息也很有用的,经常有一些提示信息是不需要用户确认的,出现几秒钟后消失就可以。”

小白想了想:“恩,可以啊!不但能做提示信息,还能做其他的一些弹窗功能,我先试着实现提示信息的功能吧!”。

大概过了半个小时时间,小白找到了老朱,他对老朱说:“我给Layer添加了一个msg方法用来添加提示信息,可是没有确定按钮我该怎么让它消失呢?您先看一下我的代码吧!”

“页面里面我做了两个色块,点击色块提示当前选中的色块颜色值。”

老朱说道:“你可以使用JavaScript里面的setTimeout函数,这个函数可以在特定时间结束以后执行一个或多个操作。setTimeout(‘要执行的js代码字符串’,等待的毫秒数)。你在Layer的msg方法中增加一个setTimeout函数处理一下就可以了。”

“恩,果然可以了!我再调整一下css样式,捎带把CSS3动画加上。”

老朱看了以后说道:“不错嘛,进步很快,还让提示信息背景宽度做了适配。不过还有些问题,你现在通过class进行查找移出提示信息,如果连续点色块,提示信息就会产生冲突,所以最好能给每一个提示信息增加一个索引或者id,这样就不会产生冲突了。你再试试!”

过了一会儿,小白高兴的找到老朱,说道:“我处理好了,现在不会冲突了,你看一下效果!”

“我通过当前页面中提示信息的数量给新的提示信息增加id,当前提示信息的位置根据上一条未消失信息的位置来确定。”

老朱看完以后说道:“恩,不错!不过还能细化,以后使用的时候碰到具体问题你再慢慢优化它吧!你现在已经做得很不错了。”

小白说:“恩,这些功能我以后可以根据自己的理解对它进行优化。把功能做成控件使用的时候真是太方便了,我以后要给用户提示一些信息的时候直接使用Layer.msg(),传入要提示的话就可以了。”

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

本篇文章与31、32、33、34内容连续

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

openlayers4中用font设置图标样式

font其实是个好东西,不论是写css还是。。。,这不,牛老师想把它用在openlayers4中,用以很方便的设置图标的大小、颜色,还不失真,东拼西凑,终于算是...

21210
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

21830
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

11020
来自专栏菩提树下的杨过

[转自blueidea]像table一样布局div Ⅰ

翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405...

25270
来自专栏xingoo, 一个梦想做发明家的程序员

CSS布局那点事儿

布局 最开始老的一代网站开发,布局都是通过表格实现的。 这样可以形成规整的网格布局,但是也会带来一定的复杂性。比如想要新增某个页面元素,就有可能要改动整个表格...

25150
来自专栏程序员的知识天地

HTML中的容器标签

什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布...

17800
来自专栏Guangdong Qi

iOS开发常用之 HUD 弹窗

74420
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 开发适配心得

众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用...

39650
来自专栏菜鸟前端工程师

html+css学习笔记011-表单

12330
来自专栏拂晓风起

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame

31210

扫码关注云+社区

领取腾讯云代金券