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>
  • 相关阅读:
    JSP基本使用
    Web介绍
    通用的数据库数据操作类
    Java集合与泛型
    我是如何刷 LeetCode
    这或许是东半球讲十大排序算法最好的一篇文章(c++版程序)
    【游戏后端】游戏服务器端开发的一些建议(转载)
    【高并发】Redis为什么是单线程,高并发快的3大原因详解
    【高可用】Redis哨兵、复制、集群的设计原理与区别
    深入理解各种排序的一些思路及分享
  • 原文地址:https://www.cnblogs.com/xyyt/p/3499422.html
Copyright © 2011-2022 走看看