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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
yii数据库的查询方法
2015/12/28 PHP
php bootstrap实现简单登录
2016/03/08 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
表单内同名元素的控制
2006/11/22 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
canvas实现钟表效果
2017/02/13 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Python将字典转换为XML的方法
2020/08/01 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
党日活动总结
2014/05/07 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
美丽心灵观后感
2015/06/01 职场文书
回复函格式及范文
2015/07/14 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
浅析python中特殊文件和特殊函数
2022/02/24 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis