《小白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内容连续

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171226A0306O00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券