内容简介:jQuery效果—雪花飘落
实现思路
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效果—雪花飘落
- 程序员亲自用代码给敲出飘落的雪花!网友:大神收我吧!
- 分布式唯一 ID 解决方案:雪花算法
- Twitter雪花算法SnowFlake算法的java实现
- 分布式SnowFlakeID(雪花ID)原理和改进优化
- 认识“雪花ID”:如何在分布式环境中大规模生成唯一ID?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript & jQuery交互式Web前端开发
[美]达克特(Duckett,J.) / 杜伟、柴晓伟、涂曙光 / 清华大学出版社 / 2015-6-9 / 79.80元
欢迎选择一种更高效的学习JavaScript和jQuery的方式。 你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本,但想以一种更好的方式来实现它们?本书非常适合您。本书不仅向您展示如何阅读和编写JavaScript代码,同时还会以一种简单且视觉化的方式,教您有关计算机编程的基础知识。阅读本书之前,您只需要对HTML和CSS有一些了解即可。 通过将编程理论......一起来看看 《JavaScript & jQuery交互式Web前端开发》 这本书的介绍吧!