本文作者:DurkBlue

圣诞节雪花js代码推荐

DurkBlue 2019-12-28 1746
圣诞节雪花js代码摘要: ❄️雪花代码<script type="text/javascript">(function($){$.fn.snow =&nb...

圣诞节雪花js代码  第1张


❄️雪花代码

<script type="text/javascript">(function($){$.fn.snow = function(options){var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),documentHeight = $(document).height(),documentWidth = $(document).width(),defaults = {minSize : 10,maxSize : 20,newOn : 1000,flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */},options = $.extend({}, defaults, options);var interval= setInterval( function(){var startPositionLeft = Math.random() * documentWidth - 100,startOpacity = 0.5 + Math.random(),sizeFlake = options.minSize + Math.random() * options.maxSize,endPositionTop = documentHeight - 200,endPositionLeft = startPositionLeft - 500 + Math.random() * 500,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);};})(jQuery);$(function(){$.fn.snow({minSize: 5, /* 定义雪花最小尺寸 */maxSize: 50,/* 定义雪花最大尺寸 */newOn: 300 /* 定义密集程度,数字越小越密集 */});});</script>


使用方法


方法①、复制其中一种JS代码,粘贴到网站</body>标签之前即可。

方法②、去掉代码前后的<script **>标签,然后将代码保存为js文件,最后在网站引用即可。

Ps:若没效果,请确认网页是否已载入JQurey,如果没有请在下雪代码之前引入JQ即可。


此篇文章由DurkBlue发布,转载一下需要注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-12-28
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享