zoukankan      html  css  js  c++  java
  • 如何在你的blog中添加炫酷的飘雪动画效果

    将下面的代码复制到你的设置栏下页眉html代码框中即可

    < script >

    (function($) {
    $.fn.snow = function(options) {
    var $flake = $('<div id="flake" />').css({
    'position': 'absolute',
    'top': '-50px'
    }).html('&#10052;'),
    documentHeight = $(document).height(),
    documentWidth = $(document).width(),
    defaults = {
    minSize: 10,
    maxSize: 20,
    newOn: 500,
    flakeColor: "#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 - 40,
    endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
    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);
    $.fn.snow({
    minSize: 5,
    maxSize: 50,
    newOn: 1000,
    flakeColor: '#FFF'
    });

    < /script>

  • 相关阅读:
    数据结构与算法的思维导图
    第九周知识总结
    第八周知识总结
    作业七:问卷调查

    图的基本概念及基本术语
    二叉树

    队列

  • 原文地址:https://www.cnblogs.com/yonyong/p/8082231.html
Copyright © 2011-2022 走看看