博客园雪花特效

  • 博客园雪花特效已关闭评论
  • 111 次浏览
  • A+
所属分类:Web前端
摘要

只能说雪花飘舞使我更喜欢博客园的界面,超浪漫的好吧,下一步看看能不能在个人博客里面加上这个特效了(记得的话),感觉好南。。。

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