一月份相信很多地方应该在下雪,
在网站上也有雪花飘该很有氛围吧!
笔者一番探索实现了该功能,
只需要一些代码就可以实现。
这里只展示一下手机端效果
<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 : 5, maxSize : 20, newOn : 500, flakeColor : "#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: 20,/* 定义雪花最大尺寸 */ newOn: 500 /* 定义密集程度,数字越小越密集 */ }); }); </script>
将以上代码插入到 footer.php 中
注意:粘贴到 </body> 标签之前
你可使用 WordPress 的工具修改
【外观】-【主题编辑器】,主题页脚
建议下载文件修改,后用 FTP 工具上传
清除缓存后,刷新网页查看网页效果
若无效果,请确认是否已引入 JQurey
若无,在上面代码之前引入 如下库即可
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
另一种方案可参考沈唁志的博客
转载请注明出处:
转载或复制请以 超链接形式 并注明出处 技术松鼠。
原文地址:《网站雪花飘落特效》 作者:松鼠小,发布于2020-01-21

评论 抢沙发