zoukankan      html  css  js  c++  java
  • JQ_下雪特效

    这是一个jQuery下雪特效。
    特效的代码如下:

    <style>
    body{background:black;color:white}
    </style>
    <script>
    /**
    * js网页雪花效果jquery插件 
    * 柯乐义 keleyi.com 整理
    * http://keleyi.com/a/e8t7hoj4.htm
    */
    (function($){

    $.fn.snow = function(options){

    var $flake = $('<div id="snowbox-k'+'eleyi-com" />').css({'position': 'absolute', 'top': '-50px'}).html('&#10052;'),
    documentHeight = $(document).height(),
    documentWidth = $(document).width(),
    defaults = {
    minSize : 10, //雪花的最小尺寸
    maxSize : 20, //雪花的最大尺寸
    newOn : 1000, //雪花出现的频率
    flakeColor : "#FFFFFF" //柯乐义 keleyi.com 整理
    },
    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() * 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);</script>

    <script>
    $(function(){
    $.fn.snow({ 
    minSize: 5, //雪花的最小尺寸
    maxSize: 50, //雪花的最大尺寸
    newOn: 300 //雪花出现的频率 这个数值越小雪花越多
    });
    });
    </script>

  • 相关阅读:
    请使用支持 JDBC 4.0 的 sqljdbc4.jar 类库
    add jars和add external jars有什么区别
    JDBC连接sql server数据库的详细步骤和代码
    ios 开发中 动态库 与静态库的区别
    Core Data使用之一(Swift): 获取
    南邮NOJ整除的尾数
    南邮NOJ卡片游戏
    南邮NOJ卡片游戏
    南邮NOJ卡片游戏
    南邮NOJ卡片游戏
  • 原文地址:https://www.cnblogs.com/ingstyle/p/4668524.html
Copyright © 2011-2022 走看看