原生js实现雪花飘落效果

最新推荐文章于 2022-02-22 00:20:16 发布

会做饭的技术男

最新推荐文章于 2022-02-22 00:20:16 发布

阅读量422

点赞数

分类专栏：前端

原文链接： https://www.mk2048.com/blog/blog.php?id=h1k2cib20kcb&title=%E5%8E%9F%E7%94%9Fjs%E5%AE%9E%E7%8E%B0%E9%9B%AA%E8%8A%B1%E9%A3%98%E8%90%BD%E6%95%88%E6%9E%9C

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

雪花飘落的效果实现步骤：1.使用setInterval定时器每800毫秒创建一个雪花；2.把每一个雪花作为参数传进动态下落的方法中即可。

<style>
    *{padding: 0;margin: 0;}
    body{
        background:#000;
        width: 100%;
        height: 100%;
        overflow:hidden;
    }
</style>

<div id="flame"></div>

js实现代码:

<script>
    

    function Obj(){}  //创建一个对象

    /*为这个对象添加一个具有一个参数的原型方法*/
    Obj.prototype.draw=function(o){
        var speed=0;   //雪花每次下落的数值（10px）
        var startPosLeft=Math.ceil(Math.random()*document.documentElement.clientWidth);//设置雪花随机的开始x值的大小
        o.style.opacity=(Math.ceil(Math.random()*3) 7)/10;  //设置透明度
        o.style.left=startPosLeft 'px';  
        o.style.color="#fff";
        o.style.fontSize=12 Math.ceil(Math.random()*14) 'px';
        setInterval(function(){
            //雪花下落的top值小鱼屏幕的可视区域高时执行下列
            if(speed<document.documentElement.clientHeight){
                o.style.top=speed 'px';
                o.style.left=startPosLeft Math.ceil(Math.random()*8) 'px';
                speed =10;
            }
            else{
                o.style.display='none';
            }
        },400);
    }

    var flame=document.getElementById('flame');
 
    /*使用setInterval定时器每800毫秒创建一个雪花*/
    setInterval(function(){
        var odiv=document.createElement('div');  //创建div
        odiv.innerHTML="✽";   //div的内容
        odiv.style.position='absolute';  //div的绝对定位
        flame.appendChild(odiv);   //把创建好的div放进flame中
        var obj=new Obj();   //创建函数
        obj.draw(odiv);  //执行obj的draw方法
    },800);   

</script>

效果图如下: