zoukankan      html  css  js  c++  java
  • 使用javascript实现的雪花飞舞的效果

    原作者是在body中不停的插入多个小div雪花来向下慢慢飘,一直飘到body的底部后,将雪花移除,于是,将原来的代码稍加修改,让他只是从屏幕的顶部飘落到屏幕底部(不是body的底部)后,就将雪花移除,另外将雪花改为fixed定位.

    效果演示:点击这里

     1 <p>
     2 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     3 <script charset="utf-8" type="text/javascript">// <![CDATA[
     4 (function($){
     5 
     6     $.fn.snow = function(options){
     7 
     8         var $flake = $('<div id="snowbox" />').css({ 'position': 'fixed', 'top': '-50px', 'border-radius': '8px','background':'#fff'}),
     9                 documentHeight     = $(document).height(),
    10                 documentWidth    = $(document).width(),
    11                 defaults        = {
    12                                     minSize        : 1,        //雪花的最小尺寸
    13                                     maxSize        : 10,        //雪花的最大尺寸
    14                                     newOn        : 100,        //雪花出现的频率
    15                                     flakeColor    : "#FFFFFF"
    16                                 },
    17                 options            = $.extend({}, defaults, options);
    18 
    19             var interval        = setInterval( function(){
    20                 var startPositionLeft     = Math.random() * documentWidth - 100,
    21                      startOpacity        = 0.5 + Math.random(),
    22                     sizeFlake            = options.minSize + Math.random() * options.maxSize,
    23                     endPositionTop        = documentHeight - 40,
    24                     endPositionLeft        = startPositionLeft - 100 + Math.random() * 500,
    25                     durationFall        = documentHeight * 10 + Math.random() * 5000;
    26                 $flake.clone().appendTo('body').css({
    27                             left: startPositionLeft,
    28                             opacity: startOpacity,
    29                             height: sizeFlake,
    30                             sizeFlake,
    31                             color: options.flakeColor
    32                         }).animate({
    33                             top: endPositionTop,
    34                             left: endPositionLeft,
    35                             opacity: 0.2
    36                         },durationFall,'linear',function(){
    37                             $(this).remove()
    38                         }
    39                     );
    40 
    41             }, options.newOn);
    42 
    43     };
    44 
    45 })(jQuery);
    46 // ]]></script>
    47 </p>
    48 <!--下面是调用方法和参数说明-->
    49 <p>
    50 <script type="text/javascript">// <![CDATA[
    51 $(function(){
    52         $.fn.snow({
    53             minSize: 1,        //雪花的最小尺寸
    54             maxSize:8,     //雪花的最大尺寸
    55             newOn: 100        //雪花出现的频率 这个数值越小雪花越多
    56         });
    57     });
    58 // ]]></script>
    59 </p>
  • 相关阅读:
    什么才是java的基础知识?
    Java的背景、影响及前景
    设计模式分类
    关于日期及日期格式转换的记录
    添加同名工具后台验证后不跳转且保留用户输入的数值
    案件讨论回复中出现把多个附件当成一个评论显示,导致分页出错
    指令发布详情弹窗实现“取消”按钮
    最大间隔分离超平面的唯一性完整证明
    CART算法与剪枝原理
    Spark MLlib学习
  • 原文地址:https://www.cnblogs.com/xyyt/p/3499422.html
Copyright © 2011-2022 走看看