H5+原生js 雪花特效

 概述

   随着前端技术的发展，越来越多的H5技术被应用到实际开发中，本次实现的是屏幕实现雪花飘落特效。

2 效果图如下：

 

 

3 主要功能

实现雪花飘落。

。。。后续功能可以自己酌情添加

 

4实现方式

  首先 ，我们需要一个容器，在这里只需要一个div就可以了，通过div的id就可以识别该容器并通过css

对其设置样式，代码如下 概述
随着前端技术的发展，越来越多的H5技术被应用到实际开发中，本次实现的是屏幕实现雪花飘落特效。
2 效果图如下：


3 主要功能
实现雪花飘落。
。。。后续功能可以自己酌情添加

4实现方式
首先 ，我们需要一个容器，在这里只需要一个div就可以了，通过div的id就可以识别该容器并通过css对其设置样式，代码如下：

然后我们开始写js。首先开始时，我们先通过id获取外层容器div

，然后定义一个定时器，用于设置雪花下落的时间。

 div=document.getElementById("container");   

接着就是在定时器里设置产生雪花，此时，将雪花图片放入容器中，而且我们会产生的雪花，因此需要定义一个数组用于承放雪花。并在此处对雪花设置样式：雪花的大小要设置随机大小、雪花产生的位置、结束的位置、下落时旋转的角度。代码如下：

setInterval(function(){
        var img=document.createElement("img");
        img.src="x.png";
        div.appendChild(img);
        array.push(img);
        img.style.position="absolute";
        img.style.top="-50px";
        img.style.webkitTransition="all 5s";

        //随机雪花大小
        var imgWidth=parseInt(Math.random()*10000000)%14+12;
        img.width=imgWidth;

        //随机雪花位置
 var left=parseInt(Math.random()*10000000)%(screen.availWidth-imgWidth);
        img.style.left=left+"px";
        //随机雪花结束位置
var leftDown=parseInt(Math.random()*10000000)%(screen.availWidth-imgWidth);
 
var topDown=screen.availHeight+parseInt(Math.random()*10000000)%(100);
        //随机雪花角度
        var deg=parseInt(Math.random()*10000000)%360+360;

        //自定义两个属性 用来存储随机的结束位置
        img.setAttribute("leftDown",leftDown);
        img.setAttribute("topDown",topDown);
        img.setAttribute("deg",deg);
    },50);

下面我们需要对雪花进行下落的动画特效开始封装方法了。创建方法downAnimation()，在方法中我们需要循环所有的雪花，改变每个雪花的落地位置。代码如下：

 for(var i=0;i0){
                    continue;
                }

                //获取雪花与生俱来的终止状态
                var leftDown=snow.getAttribute("leftDown");
                var topDown=snow.getAttribute("topDown");
                var deg=snow.getAttribute("deg");

 				  //重新改变left和top
                snow.style.left=leftDown+"px";
                snow.style.top=topDown+"px";


 				 //重新改变雪花的角度
                snow.style.transform="rotate("+deg+"deg)";


                //当雪花下落到最低位置时，改变透明度
                snow.style.opacity=1;

最后我们将downAnimation()方法放置到新创建的定时器中，设置下落时间。代码如下：

setInterval(function(){
                setTimeout(function(){
                    downAnimation();
                },1);
            },50)

========================================================================================

程序完整代码如下：