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