内容简介: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?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
互联网爆破术:快速掌握互联网运营全链条实战技巧
茶文 / 电子工业出版社 / 2018-7 / 49.00元
《互联网爆破术:快速掌握互联网运营全链条实战技巧》是一本实用的互联网运营书籍,可以让读者快速掌握运营全链条的干货技巧和相关模型,涵盖如何有效寻找市场的需求爆破点,通过测试一步步放大并引爆,直至赢利。《互联网爆破术:快速掌握互联网运营全链条实战技巧》非常适合互联网运营人员及互联网创业者阅读,它可以帮读者快速了解互联网运营的核心技巧,并用最低的成本取得成功。本书5大特色:快速入门、实战干货、低成本、系......一起来看看 《互联网爆破术:快速掌握互联网运营全链条实战技巧》 这本书的介绍吧!