十五、JS实现下雪效果

一、思路：

1.给一个div设置总体背景图(雪景图)；

2.利用js创建雪花(图片),利用Math()方法中的随机数方法random()令雪花大小位置随机分配，最后通过Math()方法中的sin()方法绘制雪花飘落的轨迹；

二、分步实现

1.背景图实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下雪效果</title>
    <style>
        *{margin: 0;padding: 0;}
        html,body{
            width: 100%;
            height: 100%;
        }
        .block{
            width: 100%;
            height: 100%;
            background: url("./image/bg.png")0 0 no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

漂亮的效果图：

2.添加雪花并使其随机大小随机位置分布

知识点：获取屏幕的可视区域

document.documentElement.clientHeight 获取高度

document.documentElement.clientWidth 获取宽度

Math()方法的取随机数

Math.random() 这里取得随机数是0~1之间乘一个数将其放大

/*获取屏幕可视宽高*/
        var v_h=document.documentElement.clientHeight;
        var v_w=document.documentElement.clientWidth;

/*随机大小*/
            var s_w=Math.random()*30+5;

另外需要注意的是需要用parseInt()转换整型的方法转换一下雪花的宽高，这里的parseInt()是用于去除单位px的，即parseInt()既可以转换成int型，而且可以查找数字舍去字符，但只能从左向右查找，遇到非数字停止

s_t=Math.random()*v_h<parseInt(snow.style.height)?Math.random()*v_h:(Math.random()*v_h-parseInt(snow.style.height));

三、让雪花飘起来

知识点：setInterval(function(),延时) 定时器函数循环调用

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

另外还有一种计时器 setTimeout()

setTimeout(function(),延时) 函数调用一次

注意：需要判断top/left是否超出可视区域

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下雪效果</title>
    <style>
        *{margin: 0;padding: 0;}
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .block{
            width: 100%;
            height: 100%;
            position: relative;
            background:url("./image/bg.png")0 0 no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }
        .snow{
            position: absolute;
        }
    </style>
    <script>
        window.onload=function(){
            /*获取屏幕可视宽高*/
            var v_h=document.documentElement.clientHeight;
            var v_w=document.documentElement.clientWidth;
            var block=document.getElementsByClassName("block")[0];
            /*创建雪花*/
            for(var i=0;i<200;i++){
                var snow=document.createElement("img");
                snow.className="snow";
                snow.src="./image/snow1.png";
                /*随机大小*/
                var s_w=Math.random()*30+5;
                snow.style.width=s_w+"px";
                snow.style.height=s_w+"px";
               /*随机位置分布*/
               //top值 left值
                //若top值小于自身高度，则设置top,若大于自身高度则top值为获取的高度减去自身高度
                var s_t=Math.random()*v_h<parseInt(snow.style.height)?Math.random()*v_h:(Math.random()*v_h-parseInt(snow.style.height));
                snow.style.top=s_t+"px";
                var s_l=Math.random()*v_w<parseInt(snow.style.width)?Math.random()*v_w:(Math.random()*v_w-parseInt(snow.style.width));
                snow.style.left=s_l+"px";

                block.appendChild(snow);
            }
            var snowh=document.getElementsByClassName("snow");
            setInterval(function (){
                for(var j=0;j<snowh.length;j++){
                    //top的改变
                    var snow_t=parseInt(snowh[j].style.top);
                    snow_t++;
                    if(snow_t>v_h){
                        snow_t=0;
                    }
                    snowh[j].style.top=snow_t+"px";
                    //left的改变
                    var snow_l=parseInt(snowh[j].style.left);
                    snow_l+=Math.sin(snow_t/2*0.1);
                    if(snow_l<0){
                        snow_l=v_w-parseInt(snowh[j].style.left);
                    }
                    if(snow_l>v_w){
                        snow_l=0;
                    }
                    snowh[j].style.left=snow_l+"px";
                }
            },50)
        }
    </script>
</head>
<body>
<div class="block"></div>
</body>
</html>

十五、JS实现下雪效果

猜你喜欢