动画--飘雪效果

_往事并不如烟

于 2017-04-18 11:41:49 发布

阅读量425

点赞数

本文链接：https://blog.csdn.net/jia495793397/article/details/70226549

版权

这次没废话，每行代码都有注释。。。。。。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background: #000;
                overflow: hidden;
            }
        </style>
        <script src="js/jquery-1.10.1.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            var flakeColor = "#fff"; //雪花的颜色
            var newOn = 200; //间隔多长时间产生一个雪花
            var flake = $("<div></div>").css("position", "absolute").html("*"); //雪花的对象
            $(function() {
                setInterval(function() {
                    var documentWidth = $(document).width(); //获取浏览器的宽度
                    var documentHeight = $(document).height();
                    var startLeft = Math.random() * documentWidth; //雪花开始时距离浏览器的left
                    var endLeft = Math.random() * documentWidth; //雪花下落后距离浏览器的left
                    var flakeSize = 5 + Math.random() * 50; //雪花随机的大小
                    var startOpacity = 0.7 + 0.3 * Math.random() //雪花一开始的透明度
                    var endOpacity = 0.4 + 0.3 * Math.random() //雪花下落后的透明度
                    var durationTime = 4000 + 6000 * Math.random() //雪花下落的时间
                    flake.clone().appendTo($("body")).css({
                        "left": startLeft,
                        "color": flakeColor,
                        "top": "-55px",
                        "font-size": flakeSize,
                        "opacity": startOpacity
                    }).animate({
                        "left": endLeft,
                        "top": documentHeight,
                        "opacity": startOpacity
                    }, durationTime, function() {
                        $(this).remove();
                    });

                }, newOn);
            })
        </script>
    </body>

</html>