• 使用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>
  • 相关阅读:
    mysql_单表查询
    mysql_建表
    MySQL基础
    JS_左边栏菜单
    Vue框架之组件系统
    Vue常用语法及命令
    Django的缓存,序列化,ORM操作的性能
    Django中的form表单
    Django中的auth模块
    AJAX请求提交数据
  • 原文地址:https://www.cnblogs.com/xyyt/p/3499422.html
Copyright © 2020-2023  润新知