zoukankan      html  css  js  c++  java
  • 博客园首页飘彩色雪花代码

    <script type="text/javascript">
    (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        : 5,
            maxSize        : 25,
            newOn        : 500,
            flakeColor    : getRandomColor() /* 此处可以定义雪花颜色,若要白色可以改为#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: getRandomColor()
        }).animate({
            top: endPositionTop,
            left: endPositionLeft,
            opacity: 0.2
        },durationFall,'linear',function(){
            $(this).remove()
        });
        }, options.newOn);
        };
    })(jQuery);
    $(function(){
        $.fn.snow({ 
            minSize: 5, /* 定义雪花最小尺寸 */
            maxSize: 50,/* 定义雪花最大尺寸 */
            newOn: 200  /* 定义密集程度,数字越小越密集 */
        });
    });
    var getRandomColor = function(){
      return '#'+Math.floor(Math.random()*16777215).toString(16); 
    }
    </script>

    进入博客园管理设置页,将此代码粘贴到html尾部末尾即可

    objccc
  • 相关阅读:
    mysql脚本导入导出
    centos6.9关闭防火墙
    hdfs 架构
    MySQL JOIN的使用
    六种方式,教你在SpringBoot初始化时搞点事情!
    mybatis快速入门
    有了Swagger2,再也不用为写Api文档头疼了
    kafka查看Topic列表及消费状态等常用命令
    @RequestMapping注解
    寻找写代码感觉(三)之使用 Spring Boot 编写接口
  • 原文地址:https://www.cnblogs.com/lbczzvv/p/7660474.html
Copyright © 2011-2022 走看看