首页 > 其他分享 >博客园雪花特效

博客园雪花特效

时间:2022-12-07 21:35:21浏览次数:35  
标签:特效 h3 博客园 random 雪花 content var Math

我没见过真实的,所以我就特别想在自己的博客里面添加一个雪花特效,

 

 

<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/    的无私奉献

标签:特效,h3,博客园,random,雪花,content,var,Math
From: https://www.cnblogs.com/wannacry/p/16964597.html

相关文章

  • 博客园主题修改分享 - 脚本篇
    如题,本期主要是通过脚本来实现博客园的各自自定义效果说明脚本运行需要开通博客园的JS权限,不懂的可以去看上篇文章博客园主题修改分享里的增加鼠标动效;脚本内容有......
  • mybatis-plus雪花算法生成Id使用详解
    文章目录​​前言​​​​一、mybatis-plus官网​​​​二、雪花算法实战​​​​1.建表​​​​2.新建测试工程​​​​3.单元测试​​​​三、实现分析​​​​四、为什么......
  • mybatis-plus雪花算法增强:idworker
    文章目录​​前言​​​​一、官网​​​​二、默认实现的弊端​​​​三、mybatis-plus中datacenterId和workerId的默认生成规则​​​​四、idworker介绍​​​​五、idwo......
  • CSS3旋转流动的彩色边框特效
     效果图如图所示:  <divclass='box'>你好</div><stylelang='scss'>.box{position:relative;border-radius:10px;......
  • 精美的web前端源码的特效
    1.JS自定义烟花特效这是一款基于JS和Canvas的自定义烟花特效,初始化界面的时候特效是不带声效的绽放,当你点击顶部中间的播放,即可以看到美丽的烟火也可以听到烟花绽放的声音......
  • 快来给你的宠物视频加个表情特效吧
    摘要:我们将给猫贴一张卡通脸,给ElonMusk贴上小胡子,给小狗贴上驯鹿角!本文分享自华为云社区《​​视频AI,给你的宠物加个表情特效!​​》,作者:HWCloudAI。GAN监督学习是一种联......
  • typora上传博客到博客园及所遇问题解决方法
    一.配置dotnet1.下载dotnet首先要到官网下载dotnet,这里根据本人多次下载尝试以及上网查询,推荐下载5.0版本的下载地址根据自己电脑配置下载,注意下载左边的,不需要下载右......
  • [转]C#并行编程系列-文章导航 - 释迦苦僧 - 博客园
    菜鸟初步学习,不对的地方请大神指教,参考《C#并行编程高级教程.pdf》目录C#并行编程-相关概念C#并行编程-ParallelC#并行编程-TaskC#并行编程-并发集合C#并......
  • [转]【读书笔记】.Net并行编程高级教程--Parallel - stoneniqiu - 博客园
    一直觉得自己对并发了解不够深入,特别是看了《代码整洁之道》觉得自己有必要好好学学并发编程,因为性能也是衡量代码整洁的一大标准。而且在《失控》这本书中也多次提到并发,......
  • 博客园 文章和随笔区别
    之前一直对随笔和文章比较迷惑,不太清楚它们之间的区别,今天仔细了解一下,发现一直误解了这两个概念。首先从内容上区分一下随笔和文章随笔内容形式比较随意,往往是作者......