博客园背景加入飘落雪花的js代码

<script type="text/javascript">
   window.onload = function () {
                var minSize = 15; //最小字体
                var maxSize = 30;//最大字体
                var newOne = 900; //生成雪花间隔, 数值越小越快
                var flakColor = "#1bd3ff"; //雪花颜色
                var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("?");//定义一个雪花
                var dhight = $("body").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-100; //雪花停止top的位置
                var endLeft= Math.random()*dw; //雪花停止的left位置
                var durationfull = 5000+Math.random()*600000; //雪花飘落速度不同, 数值越大越慢
                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>

原文地址:https://www.cnblogs.com/dmxk/p/11692184.html

时间: 2024-10-01 20:36:07

博客园背景加入飘落雪花的js代码的相关文章

博客园背景图片更换

使用博客园的模板,感觉不好看而且用的人太多了,怎么办呢? 这时候我们可以更换博客园的背景 第一步:随便选一个模板(我用的是simplememory) 第二步:设置→博客设置→相册→上传图片→复制图片链接地址 第三部:粘贴css代码(不同模板的css代码是不同的) 博主提供simplememory的代码: /*simplememory*/#google_ad_c1, #google_ad_c2 {display:none;}.syntaxhighlighter a, .syntaxhighligh

如何快速的自定义博客园背景图片

博客园的主题背景风格基本是简洁朴素风格,毕竟淳朴码农的撸码知识共享圣地不需要花里胡哨,但是作为新一代的撸码青年,我还是忍不住把博客园简单的美化了一下 打开https://sm.ms/ 上传一张你喜欢的图片,这个网站很好使,可以上传图片然后可以马上生成一条图片链接,就不需要我们自己维护图片了 然后在博客园设置中自行修改样式OK啦 background:url(https://i.loli.net/2018/07/24/5b56a0f45b6b6.jpg) no-repeat fixed; back

博客园自动循环创建索引目录JS

对于比较长的文章,有一个好的目录索引是很有必要的,可以让读者比较清楚地了解文章内容和层次.然而,目前(2015.7)博客园不像csdn博客那样,会对发布的文章自动生成目录索引.不过,一些网友通过博客园后台提供的一些自定义功能,自己写脚本实现了这一功能.我用的脚本主要就是参考赵子清的,文章地址是:http://www.cnblogs.com/zzqcn/p/4657124.html. 原作者的脚本只支持1级目录,我改了两级:第1级是h2,第2级是h3.还添加了一些小玩意,比如讨论qq群号.效果如下

博客园背景设置

博客皮肤:SimpleMemory 页面定制css /*simplememory*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntax

【装饰】博客园背景轮播

<script type="text/javascript"> var img = Math.round(Math.random() * 10); var Img = new Array(); //需要加载的背景图片 Img[0] = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3735316392,212988712&fm=200&gp=0.jpg" Img[1]

博客园美化操作

之所以写这篇文章的原因了主要就是博客园的默认样式太单一,而且很多人都在用,就想与众不同一样,不做大多数 准备工作 想要美化自己的博客园默认界面,首先需要申请js权限 步入正题 当你的这一步做完之后就可以开始给博客化妆了 #########################################页面标题样式================================ #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑

修改博客园markdown编辑器代码高亮风格的方法

???????作为一个工程师,追求极致与艺术也应当成为我们生活中的一部分,作为自己的心爱之物--博客,当然也得装扮一下,我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的,已经有前辈开发了一些代码高亮的样式可供我们开箱即用.Highlightjs就是这样一款产品. ???????下面介绍一下我是如何将这款产品应用于博客园markdown编辑器中的. 第一步,找到你所喜欢的高亮主题 ???????打开Hightlightjs的demo页面 选择你所喜欢的高亮主题.我选择的是Atom One

博客园加密登录--jsencrypt

博客园加密登录--jsencrypt 问题由来    前几天在做项目的时候,发现一般做登录的时候只是一个非常简单的`form`表单,但是这样肯定是不安全的!所以想去看看其他比较流行的网站是怎么实现的.说到安全,我第一个想到的就是去看支付宝,毕竟人家那么大的系统并且管理的是money啊! 结果,支付宝的登录确实复杂,chrome的F12竟然找不到.算了,看看我大博客园吧! 下面就是从博客园登录页面copy下来的js登录代码片段 博客园登录时采用的ajax发信http登录请求,就是采用jsencyp

【如何设置博客园好看的标题样式】

1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限.[博客园]->[设置]->[博客设置],点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一下,页面就会显示支持js代码 ,博客园也会在用户邮箱给你发送是否开通js权限的邮件. 2.添加css样式 我们在[管理]-->[设置]-->[博客设置]-->[页面定制CSS代码]中粘贴如下面的代码 #cnblogs_post_body { color: black