添加天气
按步骤操作到最后,会生成相应 js 代码,复制粘贴到 halo 后台即可!
效果
添加飘落特效
雪花
可以将 雪花特效的 js代码(不包括 script 标签) 以附件形式上传到 halo,再在 halo 后台 博客设置的页脚信息中 加入 已经上传为附件的 js 的引用
js代码
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#F3C6C9" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5, /* 定义雪花最小尺寸 */
maxSize: 50,/* 定义雪花最大尺寸 */
newOn: 500 /* 定义密集程度,数字越小越密集 */
});
});
页脚信息中加入 js 引用
樱花
halo 后台 页脚信息加入
<!--樱花飘落特效-->
<script src="http://zjq.mobi/upload/2020/07/%E6%A8%B1%E8%8A%B1%E9%A3%98%E8%90%BD-7ef7e2afbff149bcbda598f5b5f985ed.js"></script>
效果