浙江铃声推荐联盟

下雪了,程序员是时候展现真正的技术了,让特效燃起冬天的一把火

洛阳融科北大青鸟2019-03-13 13:23:40

  冬天来了,雪是不是也来了呢?我是一名前端程序员,是时候展示真正的技术了,雪花飘落是不是大家心中的一把火呢?

  

  最近浏览网页的时候看到一个这样的案例,js实现雪花飘落效果。简单的给大家介绍下:如何用javascript实现雪花飘落效果,并且可以读取图片的alt信息显示出来。自个也复制了一份,送给想操练自个水平的同学可以去操练下。

  JavaScript实现雪花飘落效果展示图图:

  我们继续说实现雪花飘落的效果

  主要是以下4步:

  1、定义一片雪花模板;

  2、设置第一个定时器,周期性定时器,每隔一段时间生成一片雪花;

  3、设置第二个定时器,一次性定时器,当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来;

  4、设置第三个定时器,当雪花落下后,删除雪花。

  上面是实现的思路,下面写出具体的代码,下面的代码是JS原生代码,最后会附上JQuery实现的代码,思路都一样。

  注意:

  因为定时器添加的事件,会在下一次Event Loop执行,所以第二个定时器的作用是为了让生成的雪花先拼接到页面中渲染出来后,再修改他的样式,这样才能让他动起来,如果没有这个定时器,浏览器会把所有的JS代码都执行完之后才渲染页面,这样的话后面的样式就直接覆盖前面的样式了,雪花就没法动了,这和浏览器的线程有关系。

  简单说,意思就是用了这个定时器,能把两次修改样式的代码分开执行,可以先把第一次修改的样式渲染后,在进行第二次的修改,雪花就会动了。

  jQuery实现效果代码:

  冬天了,大家注意添加衣服哈,打雪仗记得多建几个雪人,一年或者几年才有一次,哈哈





北大青鸟洛阳融科创新学院2018年招生火热进行中

丰富多彩的课外活动,等你来哦

点击下方“阅读原文”

了解自己适合读的专业!

↓↓↓↓↓↓