网站中实现雪花飘落代码

在制作个人博客或者一些表白墙等个人网站时,不妨加入一些特效:

特效展示:点我~~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style>
    *{padding: 0;margin: 0;}
    body{
        background:#000;
        width: 100%;
        height: 100%;
        overflow:hidden;
    }
</style>
<div id="flame"></div>
 
<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>
网站中实现雪花飘落代码

原创文章,作者:Harem,如若转载,请注明出处:https://www.hgjun.cn/?p=299

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

QQ-501439094

撩一撩:点击这里给我发消息

邮件:501439094@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

隐藏