实现思路

1.在一定的频率下在页面中生成一定数目的雪花从上往下飘落;

2.在指定的时间内飘落后移除页面;

3.可设置雪花的大小,在一定范围内随机雪花大小;

4.什么时间后清除生成雪花,停止函数。

js代码

(function($){

    $.fn.snow = function(options){

            var $flake          = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
flakeChar : "❄",
minSize : 10,
maxSize : 20,
newOn : 500,
flakeColor : '#ffffff',
durationMillis: null
},
options = $.extend({}, defaults, options); $flake.html(options.flakeChar); var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - defaults.maxSize - 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); if (options.durationMillis) {
setTimeout(function() {
clearInterval(interval);
}, options.durationMillis);
}
}; })(jQuery);

调用方式:

$(function(){
$("body").snow({'durationMillis':2000}); //2s后停止生成雪花
})

参数解释:

 * @params flakeChar - 实现雪花图案的html字符
* @params minSize - 雪花的最小尺寸
* @params maxSize - 雪花的最大尺寸
* @params newOn - 雪花出现的频率
* @params flakeColors - 雪花颜色
* @params durationMillis - 多少毫米后停止生成雪花
* @example $.fn.snow({ maxSize: 200, newOn: 1000 });

jQuery效果之雪花飘落的更多相关文章

  1. 个人网站html5雪花飘落代码JS特效下载

    如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...

  2. jQuery.snowflake雪花飘落插件

    一.前言 前言:最近圣诞节来临,需要在页面上应用一个雪花飘落的效果,做之前产品经理给了我网络上的一个demo,地址是http://demo.lanrenzhijia.com/demo/1225/sd/ ...

  3. jquery的浪漫(跑马灯 + 雪花飘落)

    jquery的浪漫 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() jquery的运用,对dom元素的增删改查 css3 3d 功能的灵活运用 ...

  4. 简单说 JavaScript实现雪花飘落效果

    说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...

  5. js实现雪花飘落效果的代码

    使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 . 代码: <html> <head> <script> /** * js与html5实现的雪花飘 ...

  6. 使用Photoshop实现雪花飘落的效果

    一.准备工作 软件环境:PhotoshopCS5 实验目的:雪花飘落的效果 二.实验步骤 1,打开素材图片并将原图层复制 2,在菜单栏内选择:滤镜->像素化->点状化,单元格大小选6  提 ...

  7. 原生js实现雪花飘落效果

    雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...

  8. 【OpenGL】Shader实例分析(七)- 雪花飘落效果

    转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如 ...

  9. Qt实现桌面动态背景雪花飘落程序

            曾经收到过一份礼物,一个雪花飘落的程序,觉得效果很炫,通过前几篇的学习,我们已经掌握了贴图的一些技巧了,那么现在就可以自己实现了(当然你必须先拥有qt信号与槽的基础知识),这里先看效果 ...

随机推荐

  1. Conflict with dependency 'com.android.support:support-annotations' in project ':xxx'. Resolved versions for app (25.4.0) and test app (27.1.1) differ 问题解决

    Conflict with dependency 'com.android.support:support-annotations' in project ':xxx'. Resolved versi ...

  2. 2个简单实例让你快速理解try-catch的用法

    相信在实际项目中,你可能经常会看到类似下面的代码 try { // 尝试执行代码块 } catch(err) { // 捕获错误的代码块 } finally { // 结果如何都会执行的代码块 } 简 ...

  3. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  4. Ubuntu 16.04 下octave的使用入门

    SciLab和octave是开源的且免费的矩阵计算工具,二者都有希望成为矩阵计算的新宠.相比之下, octave与MatLab的兼容性更高. octave遵循GPL协议(GNU General Pub ...

  5. requests 处理异常错误 requests.exceptions.ConnectionError HTTPSConnectionPool [Errno 10060]

    使用python requests模块调用vmallarg.vmall.com接口API时报如下错误: requests.exceptions.ConnectionError: HTTPSConnec ...

  6. [原创]k8exe2bat任意文件转Bat工具(WebShell无法上传EXE解决方案)

    http://qqhack8.blog.163.com/blog/static/114147985201126105626755/ 这是我2011年的东西了,当时用此方法可免杀很多马,至今依然有很大的 ...

  7. java提高(1)---异常

    异常 一.异常与错误的区别 再讲异常之前我们就应该要知道异常和错误的区别 Error类和Exception类的父类都是throwable类,他们的区别是: Error类一般是指与虚拟机相关的问题,如系 ...

  8. 【原】使用vue2+vue-router+vuex写一个cnode的脚手架

    最近喜欢上了markdown的书写方式,所以博客直接写在github上来,点击查看

  9. 一些不常用但又很有用的css小tips

    1.box-sizing:border-box box-sizing有三个属性:content-box(默认值) || border-box || inhreit.第一个自然不用说,比如我们设置一个d ...

  10. Chapter 4 Invitations——6

    The snow washed away for good after that one dangerously icy day. 在危险的冰天雪地之后,这场雪洗走了很多. Mike was disa ...