《小白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 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

标签之美七——为网页添加音乐 原

为网页添加音乐可以使用<embed></embed>这个标签。其用法和插入图片类似。

802
来自专栏Coding+

制作一个标准 ICO 图标

ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透...

4702
来自专栏地方网络工作室的专栏

HTML5+CSS3 做一个灵动的动画 TAB 切换效果

HTML5+CSS3 做一个灵动的动画 TAB 切换效果 设计师给了一个 tab 切换的效果图。虽然是一个很小的功能,但是前端工程师在实现的时候还是有很多细节需...

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

React Native 开发适配心得

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

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

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

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

2317
来自专栏Android机动车

Web App 一分钟适配 iPhone X

iPhone X 已经开抢了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗?

752
来自专栏GIS讲堂

openlayers4中用font设置图标样式

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

1681
来自专栏前端知识分享

第134天:移动web开发的一些总结(二)

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orien...

1601
来自专栏前端知识分享

第135天:移动端开发经验总结

会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动

1733
来自专栏Guangdong Qi

iOS开发常用之 HUD 弹窗

3502

扫码关注云+社区