网站雪花飘落特效-技术松鼠

一月份相信很多地方应该在下雪，

在网站上也有雪花飘该很有氛围吧！

笔者一番探索实现了该功能，

只需要一些代码就可以实现。

这里只展示一下手机端效果

<script type="text/javascript">
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
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>

另一种方案可参考沈唁志的博客

https://qq52o.me/1518.html