JavaScript如何實(shí)現(xiàn)雪花飄落效果

發(fā)布時(shí)間：2023-01-03 10:07:47 來源：億速云閱讀：154 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“JavaScript如何實(shí)現(xiàn)雪花飄落效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript如何實(shí)現(xiàn)雪花飄落效果”吧!

效果圖：

代碼：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> body { background-color: #000; /*防止出現(xiàn)向下滾動(dòng)條*/ overflow: hidden; } </style>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script> function snow() { 
        //1、定義一片雪花模板 
        var flake = $("<div>").css({ "position": "absolute", "color": "#fff" }).html("?"); 
        //獲取頁面的寬度，利用這個(gè)數(shù)來算出，雪花開始時(shí)left的值 
        var documentWidth = $(document).width(); 
        //獲取頁面的高度 相當(dāng)于雪花下落結(jié)束時(shí)Y軸的位置 
        var documentHieght = $(document).height(); 
        //定義生成一片雪花的毫秒數(shù) 
        var millisec = 100; 
        //2、設(shè)置第一個(gè)定時(shí)器，周期性定時(shí)器，每隔一段時(shí)間（millisec）生成一片雪花； 
        setInterval(function() { 
            //隨機(jī)生成雪花下落 開始 時(shí)left的值，相當(dāng)于開始時(shí)X軸的位置 
            var startLeft = Math.random() * documentWidth; 
            //隨機(jī)生成雪花下落 結(jié)束 時(shí)left的值，相當(dāng)于結(jié)束時(shí)X軸的位置 
            var endLeft = Math.random() * documentWidth; 
            //隨機(jī)生成雪花大小 
            var flakeSize = 5 + 20 * Math.random(); 
            //隨機(jī)生成雪花下落持續(xù)時(shí)間 
            var durationTime = 4000 + 7000 * Math.random(); 
            //隨機(jī)生成雪花下落 開始 時(shí)的透明度 
            var startOpacity = 0.7 + 0.3 * Math.random(); 
            //隨機(jī)生成雪花下落 結(jié)束 時(shí)的透明度 
            var endOpacity = 0.2 + 0.2 * Math.random(); 
            //3、克隆一個(gè)雪花模板,定義雪花的初始樣式，拼接到頁面中 
            flake.clone().appendTo($("body")).css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": "-25px", }).animate({ 
                //執(zhí)行動(dòng)畫 
                "left": endLeft, "opacity": endOpacity, "top": documentHieght }, durationTime, function() { 
                    //4、當(dāng)雪花落下后，刪除雪花。 
                    $(this).remove(); 
            });
        }, millisec); 
    }; 
    snow(); 
</script>
</body>
</html>

到此，相信大家對(duì)“JavaScript如何實(shí)現(xiàn)雪花飄落效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

JavaScript如何實(shí)現(xiàn)雪花飄落效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽