• 首页

  • 图库

  • 分类

  • 随笔

  • 归档

  • 友链

  • 关于我
❤ 寸 劲 - 开 天 ❤
❤ 寸 劲 - 开 天 ❤

寸劲开天

获取中...

07
14
各种问题

给博客添加天气和飘落特效!

发表于 2020-07-14 • 被 256 人看爆

添加天气

登录中国天气网站 定义自己的天气插件(点我~)

中国天气

按步骤操作到最后,会生成相应 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('&#10052;'),
            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>

效果

分享到:
设计模式之结构型模式!
SpringBoot+Mybatis实现评论楼中楼功能!
  • 文章目录
  • 站点概览
寸劲开天

帅哥寸劲开天

Github QQ Email RSS
看爆 Top5
  • Spring 基础知识回顾! 659次看爆
  • Spring MVC 基础知识回顾! 327次看爆
  • Ajax 基本使用 回顾! 258次看爆
  • 给博客添加天气和飘落特效! 257次看爆
  • SpringBoot+Mybatis实现评论楼中楼功能! 238次看爆

Copyright © 2021 寸劲开天 · 鲁ICP备19012310号

Proudly published with Halo · Theme by fyang · 站点地图