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

最新推荐文章于 2022-12-28 13:21:52 发布

浅若清风爱

最新推荐文章于 2022-12-28 13:21:52 发布

阅读量824

点赞数 1

分类专栏： Javascript jQuery

本文链接：https://blog.csdn.net/qq_43245746/article/details/89285497

版权

Javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

<!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…

浅若清风爱

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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-...
复制链接

扫一扫