jQuery效果—雪花飘落
Posted 风雨后见彩虹
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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效果—雪花飘落的主要内容,如果未能解决你的问题,请参考以下文章