如何在你的blog中添加炫酷的飘雪动画效果

将下面的代码复制到你的设置栏下页眉html代码框中即可

< script >
(function($) {
$.fn.snow = function(options) {
var $flake = $('<div id="flake" />').css({
'position': 'absolute',
'top': '-50px'
}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize: 10,
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 - 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);
};
})(jQuery);
$.fn.snow({
minSize: 5,
maxSize: 50,
newOn: 1000,
flakeColor: '#FFF'
});
< /script>
上一篇:ThinkPHP - Widget 工具


下一篇:es6 let和const