发布时间:2022-12-07 文章分类:编程知识 投稿人:王小丽 字号: 默认 | | 超大 打印

我没见过真实的博客园雪花特效,所以我就特别想在自己的博客里面添加一个雪花特效,首先需要申请js权限,快的话几小时内就可以通过,如何在页脚html里加上下面的代码即可

<script src="https://files.cnblogs.com/files/nthforsth/mouse-click.js"></script>
<canvas width="1777" 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><b>阅读目录</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_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/ 的无私奉献