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
  • 相关阅读:
    论url
    jquery send(data) 对data的处理
    jquery ajax 对异步队列defer与XMLHttprequest.onload的依赖
    requirejs解决异步模块加载方案
    vue 解决display与 transition冲突
    node exports与 module.exports的区别
    node js 模块分类
    写在入职初期
    入职前要学习的一些知识
    论文实验 云平台压力测试及服务器性能测试
  • 原文地址:https://www.cnblogs.com/lbczzvv/p/7660474.html
Copyright © 2011-2022 走看看