案例雪花飘落效果

Posted sherrystudy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了案例雪花飘落效果相关的知识,希望对你有一定的参考价值。

使用DOM节点操作
1、周期性创建雪花
setInterval()
2、雪花出现的位置随机
function rand(m,n){return Math.floor(Math.random() * (n-m+1)) + m}
document.documentElement.clientWidth || document.body.clientWidth
3、控制雪花向下飘(移动的步径)
var step = 1;
4、移除超出窗口高度的雪花元素
document.documentElement.clientHeight || document.body.clientHeight

==================具体代码如下所示======================

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>雪花飘落特效实现</title>

        <style>

                 *{

                         margin:0;

                         padding:0;

                 }

                 body{

                         width: 100%;

                         height: 100%;

                         overflow: hidden;

                         background-image: url(‘./images/snow.jpg‘);

                 }

        </style>

</head>

<body>

</body>

<script>

        //获取随机整数函数

        function rand(m,n){

                 return Math.floor(Math.random() * (n - m + 1)) + m;

        }

        function setStyle(snowDiv){

                 snowDiv.innerHTML = "?";

                 snowDiv.style.color = "#fff";

                 snowDiv.style.position = "absolute";

                 snowDiv.style.left = rand(0,document.documentElement.clientWidth || document.body.clientWidth) + ‘px‘;

                 snowDiv.style.top = rand(0,200) + ‘px‘;

                 snowDiv.style.fontSize = rand(16,50) + ‘px‘;

                 snowDiv.style.opacity = Math.random();

                 document.body.appendChild(snowDiv);

        }

        //周期性创建雪花

        setInterval(function(){

                 var snowDiv = document.createElement(‘div‘);

                 setStyle(snowDiv);

 

                 //设置雪花飘落的步径

                 var step = 1;

                 var run = setInterval(function(){

                         var newTop = snowDiv.offsetTop + step;

                         if(newTop  >= document.documentElement.clientHeight || document.body.clientHeight){

                                  document.body.removeChild(snowDiv);

                                  clearInterval(run);

                         }

                         snowDiv.style.top = newTop + ‘px‘;

                 },20)

        },100)

</script>

</html>

以上是关于案例雪花飘落效果的主要内容,如果未能解决你的问题,请参考以下文章

原生js实现雪花飘落效果

OpenGLShader实例分析- 雪花飘落效果

个人网站html5雪花飘落代码JS特效下载

纯代码为网站站点添加雪花飘落效果

原生JS实现雪花飘落的效果

js之雪花飘落