JavaScript實現雪花飄落效果特效

沒有雪的冬天失去瞭冬天的美景,不見瞭千裡冰封,萬裡雪飄的北國之美,詩人無從寫雪,畫傢畫不出雪景,攝影師拍不到冬天的美麗。雪,是冬天的靈魂,為大地鋪好背景,之後發生的都如夢似幻,就像童話般的存在。冬天沒有雪,能難倒程序猿嗎,沒有雪自己造,這篇文章主要介紹瞭JavaScript實現雪花飄落效果特效,需要的朋友可以參考下

!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; /*防止出現向下滾動條*/ 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("❄"); 
        //獲取頁面的寬度,利用這個數來算出,雪花開始時left的值 
        var documentWidth = $(document).width(); 
        //獲取頁面的高度 相當於雪花下落結束時Y軸的位置 
        var documentHieght = $(document).height(); 
        //定義生成一片雪花的毫秒數 
        var millisec = 100; 
        //2、設置第一個定時器,周期性定時器,每隔一段時間(millisec)生成一片雪花; 
        setInterval(function() { 
            //隨機生成雪花下落 開始 時left的值,相當於開始時X軸的位置 
            var startLeft = Math.random() * documentWidth; 
            //隨機生成雪花下落 結束 時left的值,相當於結束時X軸的位置 
            var endLeft = Math.random() * documentWidth; 
            //隨機生成雪花大小 
            var flakeSize = 5 + 20 * Math.random(); 
            //隨機生成雪花下落持續時間 
            var durationTime = 4000 + 7000 * Math.random(); 
            //隨機生成雪花下落 開始 時的透明度 
            var startOpacity = 0.7 + 0.3 * Math.random(); 
            //隨機生成雪花下落 結束 時的透明度 
            var endOpacity = 0.2 + 0.2 * Math.random(); 
            //3、克隆一個雪花模板,定義雪花的初始樣式,拼接到頁面中 
            flake.clone().appendTo($("body")).css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": "-25px", }).animate({ 
                //執行動畫 
                "left": endLeft, "opacity": endOpacity, "top": documentHieght }, durationTime, function() { 
                    //4、當雪花落下後,刪除雪花。 
                    $(this).remove(); 
            });
        }, millisec); 
    }; 
    snow(); 
</script>
</body>
</html>

到此這篇關於JavaScript實現雪花飄落效果特效的文章就介紹到這瞭,更多相關js雪花特效內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: