js雪花飘落特效

js雪花飘落特效

1.概述

   随着前端技术的发展，网页上的特效也逐渐丰富了起来，页面美观度得到大大的提升，今天我就给大家分享一个js雪花飘落特殊效的实现方式，特别适合元旦、圣诞、新年等节日的气氛烘托。

2.效果图如下：

 

3.主要功能

支持雪花的随机飘落，

支持动画过度，

支持雪花的旋转，

支持透明度的缓慢减少，

支持对已经降落完成的雪花进行时时删除，大大减小了浏览器的负担。

4.实现方式

我这里写的是一个满屏的雪花飘落特效，所以先定义一个容器，设置高度为100%，overflow：hidden；然后就是用js代码来实现具体操作。

首先定义一个全局的容器节点对象和一个数组，用来存放新随机出来的img节点。

第二步，设置一个定时器，用来不断随机产生雪花，我这里用的是创建img节点的方式来创建雪花，创建一个就把它放在数组里面，当然还有其他的方式，设置每个雪花的动画时间，设置雪花的样式，随机出雪花的初始位置、结束位置和旋转的角度，设置img节点额外的属性来存储随机产生的数值，方便下面调用。代码如下：

//开启定时器，产生雪花

           setInterval(function(){

                var img=document.createElement("img");

                img.src="img/xue.gif";

                div.appendChild(img);

                array.push(img);

 

                img.style.position="absolute";

                img.style.top="0px";

                img.style.webkitTransition="all 10s";

                //随机雪花大小

                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);

            },40);

第三步，再设置一个定时器，不断循环所有的雪花，设置每个雪花的终止状态和旋转角度，如果已经设置完，就从数组里将其删除，以免造成浏览器负载过大。代码如下：

  setInterval(function(){

//              setTimeout(function(){

                    downAnimation();

//              },1);

            },50);

        }

        /***

         * 雪花下落动画特效

         */

        function downAnimation(){

            //循环所有的雪花，改变每个雪花的落地位置

            for(var i=0;i<array.length;i++){

                var snow=array[i];

                //将处理完的删除

                array.splice(i,1);

                //校验是否已经设置完终点状态了

                if(parseInt(snow.style.top)){

                    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=0;

            }

 

        }

第四步，再设置一个定时器，每隔一秒判断一下新创建的img中的雪花图片，是否已经超越了屏幕大小，如果雪花距离顶端的距离超过屏幕的可用高度，就将这个img节点删除。也是为了减小浏览器的负担。

 

到目前为止，雪花飘落特效的功能已经基本完成了，而且简单使用，另外由于篇幅问题，先给大家分享到这里，大家也可以继续完善一下自己的代码。后续还会有更多的分享给大家，敬请期待。