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中each循环的简单回滚操作
May 05 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
从0开始学Vue
2016/10/27 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python区块及区块链的开发详解
2019/07/03 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
自动化职业生涯规划书范文
2014/01/03 职场文书
庆元旦广播稿
2014/02/10 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
征婚广告词
2014/03/17 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
工程负责人任命书
2014/06/06 职场文书
财务出纳岗位职责
2015/03/31 职场文书
航班延误投诉信
2015/07/02 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python