jQuery实现简单的雪花下落样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>

<body>

</body>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
    var minSize = 5; //最小字体
    var maxSize = 50; //最大字体
    var newOne = 100; //生成学花的间隔
    var flakColor = "aqua"; //雪花时间
    var flak = $('<div class="xh"></div>').css({
        position: "absolute",
        top: "0px"
    }).html('❄') //定义一个雪花
    var dhight = $(window).height(); //定义视图高度
    var dw = $(window).width(); //定义视图宽度
    setInterval(function () {
        var sizeflak = minSize + Math.random() * maxSize //产生大小不等的雪花
        var startLeft = Math.random() * dw //雪花生成时随机的left值
        var starttopcity = 0.7 + Math.random() * 0.3 //随机透明度
        var endpositionTop = dhight - 100; //雪花停止top的位置
        var endLeft = Math.random() * dw; // 雪花停止的left位置
        var durationfull = 5000 + Math.random() * 3000; // 雪花飘落速度不同
        flak.clone().appendTo($('body')).css({
            "left": startLeft,
            "opacity": starttopcity,
            'font-size': sizeflak,
            "color": flakColor,
        }).animate({
            "top": endpositionTop,
            "left": endLeft,
            "opacity": 0.1
        }, durationfull, function () {
            $(this).remove()
        });
    }, newOne)
</script>

</html>

以上的代码就可以实现雪花下落的效果，其中的注释个人觉得很详细，希望对各位有帮助。(￣y▽￣)╭ Ohohoho…

jQuery实现简单的雪花下落样式

猜你喜欢