Hexo中NexT主题添加雪花飘落效果

最新推荐文章于 2024-06-10 14:10:50 发布

DonLex

最新推荐文章于 2024-06-10 14:10:50 发布

阅读量3.6k

点赞数 3

分类专栏： hexo 文章标签： Hexo Next

本文链接：https://blog.csdn.net/stormdony/article/details/86001618

版权

为了增加博客站点的趣味性，特意添加了雪花飘落的效果。效果预览地址：https://donlex.cn ,请在PC端打开，移动端是看不到效果的。

实现方法：在 \themes\next\source\js\src 目录下新建一个 snow.js 文件，复制粘贴一下代码。

其中样式一是六边形的雪片，样式二是小圆点的雪花，其自行调试，选择喜欢的样式。

/*样式一*/
(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		: 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