zoukankan      html  css  js  c++  java
  • 漫天飞舞的雪花效果

    Github:

    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                body{
                    background-color: black;
                }
            </style>
        </head>

        <body>
        </body>
        <script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var minsize = 5,
                maxsize = 50,
                time1 = 100,
                snowColor = "#fff";
            var snow = $("<div></div>").css({
                "position": "absolute",
                "top": "-50px"
            }).html("❄");
            $(function() {
                var documentWidth = $(document).width();
                var documentHeight = $(document).height();
                setInterval(function() {
                    var startPositionLeft = Math.random() * documentWidth;//起始X位置
                    var startOpacity = 0.7 + Math.random() * 0.3;//起始透明度
                    var endPositionLeft = Math.random() * documentWidth;//终止x位置
                    var endPositionTop = documentHeight;//终止y位置
                    var fallSpeed = 4000 + Math.random() * 3000;//下降速度
                    var snowSize = minsize + Math.random() * maxsize;//雪花随机尺寸
                    snow.clone().appendTo("body").css({
                        "left": startPositionLeft,
                        "font-size": snowSize,
                        "opacity": startOpacity,
                        "color": snowColor

                    }).animate({
                        "top": endPositionTop,
                        "left": endPositionLeft,
                        "opacity": 0.5,
                    }, fallSpeed, function() {
                        $(this).remove();
                    });

                }, time1);
            })
        </script>

    </html>

  • 相关阅读:
    迅为iTOP4412开发板支持4G以上文件系统扩展
    迅为瑞芯微itop3399开发板Android8系统wifi移植
    centos 下安装显卡驱动步骤
    smarty函数转载
    jquery.qrcode二维码插件生成彩色二维码
    转 jquery插件241个jquery插件—jquery插件大全
    收集的jquery插件
    主机屋空间
    用过的php函数
    VeryMule网上商城
  • 原文地址:https://www.cnblogs.com/PeterSpeaking/p/6269750.html
Copyright © 2011-2022 走看看