草庐IT

博客园雪花特效

wannacry 2023-03-28 原文
我没见过真实的,所以我就特别想在自己的博客里面添加一个雪花特效,首先需要申请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 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="#_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/    的无私奉献

有关博客园雪花特效的更多相关文章

  1. ruby - 在 Middleman 中移动博客文章位置 - 2

    我正在为我的网站使用MiddlemanBloggem,但默认情况下,博客文章似乎需要位于/source中,这在查看vim中的树时并不是特别好并尝试在其中找到其他文件之一(例如模板)。通过查看文档,我看不出是否有任何方法可以移动博客文章,以便将它们存储在其他地方,例如blog_articles文件夹或类似文件夹。这可能吗? 最佳答案 将以下内容放入您的config.rb文件中。activate:blogdo|blog|blog.permalink=":year-:month-:day-:title.html"blog.sources=

  2. ruby-on-rails - 博客条目和评论的倒序显示,Ruby on Rails - 2

    我是Rails的新手,所以在这里需要一些帮助。我已经按照几个教程创建了一个带有评论甚至一些AJAX花哨功能的博客,我被困在一些我希望很容易的事情上。博客和评论的默认显示是先列出最早的。我如何反转它以在顶部显示最新条目和最新评论。真的不知道这是Controller还是模型的功能。我已经做了一些定制,所以如果有帮助的话,这里是Controller.rb文件的代码。评论ControllerclassCommentsController帖子管理员classPostsController[:index,:show]#GET/posts#GET/posts.xmldefindex@posts=Po

  3. ruby-on-rails - 向帖子添加类别的最佳方式是什么 - Ruby on Rails 博客 - 2

    我是Ruby和Rails的新手,请多多包涵。我创建了一个非常简单的博客应用程序,其中包含帖子和评论。一切都很好。我的下一个问题是关于添加类别。我想知道最好的方法来做到这一点。由于我还没有看到太多关于Rails的东西,所以我想我会问的。明确地说,我希望一个帖子可以有多个类别,一个类别可以有多个帖子。最好的方法是创建一个“类别”表,然后使用帖子和类别模型来执行has_many:posts、has_many:categories吗?然后我还会设置routes.rb以便帖子嵌入类别下吗?或者有没有更简单的方法,只需在现有的帖子表中添加一个类别列?(在这种情况下,我想拥有多个类别会很困难)。

  4. ruby-on-rails - 基于 Ruby 的博客引擎 - 2

    存在哪些支持Rack的博客引擎?我想将一个免费博客部署到heroku并且需要比Wordpress.com或Blogerty提供的免费托管更多的可定制性。另外在另一篇文章中,有没有人尝试将Wordpress移植到Ruby? 最佳答案 以任何特殊顺序:==基于Racktotoruby-slippers基于toto==基于JekyllJekyllitselfOctopress在jekyll中写博客spinto杰基尔cmsprose杰基尔cms==基于Railstypo最古老的活跃之一,具有更多功能但更复杂enki对于黑客,基本代码simp

  5. ruby-on-rails - 在 Rails 上创建博客 ruby​​ - 删除评论的问题 - 2

    因为我总是打字,所以我对Rails和一般编程都不熟悉,所以请放轻松。提前致谢。我已经成功地遵循了RyanBates在howtobuildaweblogin15minutes上的初始教程。.如果您不知道,本教程将带您完成创建帖子和允许对这些帖子发表评论的过程。它甚至通过在帖子show.html.erb页面上创建和显示评论来引入AJAX。一切都很好。问题来了,当Ryan带您完成本教程时,他清除了comments_controller并且只显示了用于创建评论的代码。我正在尝试重新添加编辑和销毁评论的功能。似乎无法正常工作,一直在删除实际的帖子而不是评论(日志显示我一直在向PostsContr

  6. ruby - 单个 Jekyll 网站中的多个博客 - 2

    有没有办法让一个Jekyll网站拥有多个博客?我目前希望在一个站点中有两个博客。 最佳答案 我是页面http://www.garron.me/blog/multi-blog-site-jekyll.html的作者考虑到您需要单独的存档页面,以及每个单独博客的最新帖子。只需使用这样的东西:创建文件archives-blog-1.html并填充:{%forpostinsite.posts%}{%ifpost.categoriescontains'blog1'%}{{post.title}}Date:{{post.date}}{%endi

  7. ruby - 如何在 jekyll markdown 博客中包含视频 - 2

    我刚开始使用jekyll写博客。我用Markdown写我的帖子。现在,我想在我的帖子中包含一个youtube视频。我该怎么做?此外,我不太喜欢jekyll默认提供的pygments高亮显示。无论如何我可以将其更改为其他样式吗?如果是的话,你能给我指点一些不错的样式/插件吗? 最佳答案 您应该能够将用于嵌入的HTML直接放入您的markdown中。在视频下方,有一个“分享”按钮,点击它,然后点击“嵌入”按钮,它应该会给你一些看起来有点像的东西:只需将其复制并粘贴到您的帖子中,Markdown预处理器不会触及它。对于Pygments,在

  8. javascript - 在 jquery 中创建雪花 - 2

    我使用jquery创建雪花。一切似乎都很好,但我想在您单击特定薄片时执行警报选项,然后它应该会提醒消息。但是我实现了警报选项不断触发的点击功能。我不确定我在哪里做错了。我尝试了preventDefault仍然没有任何反应。http://jsfiddle.net/vicky081/4cZdu/12/functionsnowFalling(){//movethesnow$('.snow').each(function(key,value){//checkifthesnowhasreachedthebottomofthescreenif(parseInt($(this).css('top')

  9. javascript - 在对象数组中找到博客点赞最多的人 - 2

    我有一个博客对象数组,如何找到总点赞数最高的作者?我曾尝试使用for循环并将具有不同作者的每个对象推送到一个单独的数组中,然后计算数组中喜欢的总数。我很难将对象相互比较,并且不断为同一作者获取多个数组。constblogs=[{title:'First',author:'Jane',likes:4,},{title:'Second',author:'Joe',likes:1,},{title:'Third',author:'Jane',likes:7,},{title:'Fourth',author:'Jack',likes:1,},{title:'Fifth',author:'Joe

  10. Unity3D粒子系统之制作烟雾特效 - 2

    Unity3D粒子系统制作烟雾特效本文将会介绍如何使用Unity内的粒子系统制作烟雾效果。如果想了解Unity粒子系统中的基础属性,可以看这篇博客:Unity3D粒子系统之基础属性介绍先附上预览图:制作教程材质贴图首先我们需要一张烟雾材质用的材质贴图,我是自己画的,可以参考下图自己画一张或者去网上找素材。注意,一定要使用黑底的图片。将画好的图片导入Unity中。烟雾材质在Project窗口新键材质,名字和位置随自己习惯。Shader模式选择LegacyShaders/Particles/Additive,将之前导入的贴图拖入ParticleTexture中,如下图所示。这样需要用到的材质就创建

随机推荐