博客園雪花特效-有解無憂

我沒見過真實的

，所以我就特別想在自己的博客里面添加一個雪花特效，首先需要申請js權限，快的話幾小時內就可以通過，如何在頁腳html里加上下面的代碼即可

<script src="https://files.cnblogs.com/files/nthforsth/mouse-click.js"></script>
<canvas  height="841"
    style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<script type="text/javascript">
    window.onload = function () {
                var minSize = 10; //最小字體
                var maxSize = 20;//最大字體
                var newOne = 150; //生成雪花間隔
                var flakColor = "#f5f5f5fa"; //雪花顏色
                var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("?");//定義一個雪花
                var dhight = $(window).height(); //定義視圖高度
                var dw =$(window).width()-80; //定義視圖寬度
                setInterval(function(){
                var sizeflak = minSize+Math.random()*maxSize; //產生大小不等的雪花
                var startLeft = Math.random()*dw; //雪花生成是隨機的left值
                var startOpacity = 0.7+Math.random()*0.3; //隨機透明度
                var endTop= dhight + 4000; //雪花停止top的位置
                var endLeft= Math.random()*dw; //雪花停止的left位置
                var durationfull = 12000 + Math.random()*100; //雪花飄落速度不同
                flak.clone().appendTo($("body")).css({
                "left":startLeft ,
                "opacity":startOpacity,
                "font-size":sizeflak,
                "color":flakColor
                }).animate({
                "top":endTop,
                "left":endLeft,
                "apacity":0.1
                },durationfull,function(){
                $(this).remove()
                });
                },newOne);
            }
</script>
<script language="javascript" type="text/javascript">
    //生成目錄索引串列
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章節標題不是h3,只需要將這里的h3換掉即可
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>閱讀目錄</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="https://www.cnblogs.com/wannacry/archive/2022/12/07/#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="https://www.cnblogs.com/wannacry/archive/2022/12/07/#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
        }
        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }    
}
GenerateContentList();
</script>

只能說雪花飄舞使我更喜歡博客園的界面，超浪漫的好吧，下一步看看能不能在個人博客里面加上這個特效了（記得的話），感覺好南，，，

在此特別感謝大佬：https://www.cnblogs.com/xiximayou/ 的無私奉獻

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539476.html

標籤：其他

上一篇：CSS Margin中5個經典布局解決方案，重難點知識，記得收藏復習

下一篇：day34-JSON&Ajax02