JavaScript：飘雪效果

最新推荐文章于 2022-12-30 09:00:00 发布

Icon_酱

最新推荐文章于 2022-12-30 09:00:00 发布

阅读量957

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/yytIcon/article/details/78959193

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在开始敲代码之前，我需要弄清楚一下几个问题：
1、雪片存在的方式，我是用的<div>❄</div>来表示一个雪片；
2、雪片的大小应该是在一个范围之内而且是随机的；
3、雪片的透明度也应该是有变化的，刚出现的雪片肯定会比飘落了一定时间的雪片的颜色深；
4、雪片出现的位置也应该随机，所以最后飘落的位置也应该随机；
5、最重要的是，因为雪片以div 的形式存在，所以当雪片在飘落到最下方的时候，这个div就应该消失，而不是一直存在于页面中，加重页面的负担。

以下是代码：

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/飘雪demo1.css" />
        <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
        <script type="text/javascript" src="js/飘雪demo1.js" ></script>
        <title>js小案例之飘雪效果</title>
    </head>
    <body>
        <!--这里可以加一个音乐播放器，放你喜欢的歌-->
        <!--<audio src="音乐链接" controls="controls" autoplay="autoplay"></audio>-->
    </body>
</html>

css代码

*{
    padding: 0;
    margin: 0;
}

body{
    overflow: hidden;//为了防止雪片与浏览器重合部分导致浏览器出现滚动条，所以要用overflow：hidden；
    background-color: black;//我在这里用的黑色作为背景，你也可以根据自己的喜欢选择照片，代码像我在下方注释的那样
    /*background-image: url(../img/7.jpg);
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
}*/

js代码，这里使用了jQuery

var JGtime = 10 + Math.random()*100;//产生雪片的时间间隔
var flake = $("<div>❄</div>").css("position","absolute");//雪片对象
$(function(){  
    setInterval(function(){//间隔JGtime产生一个雪片     
    var dWidth = $(document).width();//获取浏览器页面宽度
    var dHeight = $(document).height();//获取浏览器页面高度
    var startLeft = Math.random()*dWidth;//下落前左边的距离随机
    var endLeft = Math.random()*dWidth;//下落后左边的距离随机
    var flakeSize = 6 + Math.random()*50;//雪片大小
    var startOpacity = 0.7+0.3*Math.random();//开始的透明度
    var endOpacity = 0.4 + 0.3*Math.random();//落下的透明度
    var durationTime = 4000+8000*Math.random();//时间随机。所以速度随机
    flake.clone().appendTo($("body")).css({//复制一个雪片对象，添加到body，出现的位置
        "left":startLeft,
        "top":"-56px",
        "font-size":flakeSize,//大小
        "color":"white",//我的雪片是白色，如果你想颜色也随机，可以参考我上一篇（H5 +JavaScript生成验证码）里面的随机颜色的方法。
        "opacity":startOpacity
    }).animate({
        "left":endLeft,
        "opacity":endOpacity,
        "top":dHeight
    },durationTime,function(){
        $(this).remove();//当雪片到最后，调用回调函数，让他消失，是为了保持页面流畅
    });//经过一个随机的时间，变成上面的状态
    },JGtime);
});

Icon_酱

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：飘雪效果

在开始敲代码之前，我需要弄清楚一下几个问题： 1、雪片存在的方式，我是用的<div>❄</div>来表示一个雪片； 2、雪片的大小应该是在一个范围之内而且是随机的； 3、雪片的透明度也应该是有变化的，刚出现的雪片肯定会比飘落了一定时间的雪片的颜色深； 4、雪片出现的位置也应该随机，所以最后飘落的位置也应该随机； 5、最重要的是，因为雪片以div 的形式存在，所以当雪片在飘落到最下方的时候，
复制链接

扫一扫