jQuery实现的下雪动画效果示例【附源码下载】


Posted in jQuery onFebruary 02, 2018

本文实例讲述了jQuery实现的下雪动画效果。分享给大家供大家参考,具体如下:

html部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- snow -->
    <script src="js/jquery.snow.js"></script>
  </head>
  <body>
    <div id="content-wrapper">
     <div class="inner clearfix">
      <section id="main-content">
       <img src="images/merry_christmasA.jpg" alt="chrismas">
      </section>
     </div>
    </div>
    <script>
     $(document).ready( function(){
     $.fn.snow( { minSize: 2, maxSize: 150, newOn: 200, flakeColor: '#FFFFFF' } );
     });
    </script>
    </body>
</html>

jquery.snow.js:

/**
 * jquery.snow - jQuery Snow Effect Plugin
 *
 * Available under MIT licence
 *
 * @version 1 (21. Jan 2012)
 * @author Ivan Lazarevic
 * @requires jQuery
 * @see http://workshop.rs
 *
 * @params minSize - min size of snowflake, 10 by default
 * @params maxSize - max size of snowflake, 20 by default
 * @params newOn - frequency in ms of appearing of new snowflake, 500 by default
 * @params flakeColor - color of snowflake, #FFFFFF by default
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });
 */
(function($){
  $.fn.snow = function(options){
      var $flake     = $('<div id="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
        documentHeight = $(document).height(),
        documentWidth  = $(document).width(),
        defaults    = {
                  minSize   : 10,
                  maxSize   : 20,
                  newOn    : 500,
                  flakeColor : "#FFFFFF"
                },
        options     = $.extend({}, defaults, options);
      //setInterval-setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
      //开始一个周期-开始添加雪花
      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);
      //结束周期-停止添加雪花
      setTimeout(function(){
        window.clearInterval(interval);
      },5000);
  };
})(jQuery);

不需要css样式

主要用到:setInterval-setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。& animate动画

运行效果:

jQuery实现的下雪动画效果示例【附源码下载】

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
jQuery代码优化方法总结
Jan 29 #jQuery
jquery写出PC端轮播图实例
Jan 26 #jQuery
You might like
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
输入N,打印N*N矩阵
2012/02/20 面试题
DataReader和DataSet的异同
2014/12/31 面试题
残疾人创业典型事迹
2014/02/01 职场文书
一年级语文教学反思
2014/02/13 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
经济类毕业生求职信
2014/06/26 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
个人作风建设总结
2014/10/23 职场文书
颐和园导游词
2015/01/30 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
python tkinter模块的简单使用
2021/04/07 Python
python process模块的使用简介
2021/05/14 Python