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鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery 时间戳转日期过程详解
Oct 12 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
?繁体转换的class
2006/10/09 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
JavaScript面象对象设计
2008/04/28 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
python list 合并连接字符串的方法
2013/03/09 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python搜索包的路径的实现方法
2019/07/19 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
工作自我评价怎么写
2014/01/29 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python