最近在研究博客园的美化效果，看到有一个樱花飘落的效果，忽然突发奇想，如果能根据当前日期所处的季节实现不同的飘落效果岂不是更酷。😂
最近在研究博客园的美化效果，看到有一个樱花飘落的效果，忽然突发奇想，如果能根据当前日期所处的季节实现不同的飘落效果岂不是更酷。😂
预览效果
我的思路其实很简单，现在已经找到一个樱花的飘落效果，通过阅读代码其实可以发现，特效中的樱花用的是一张图片，图片被转换成base64编码的字符串形式保存，我们只要在不同的季节绘制不同的图片就行了，春天飘🌸樱花、夏天飘🍃叶子、秋天飘🍁枫叶、冬天飘❄雪花。
然后我们还要获取当前日期所处的季节，我打算用节气，这样比较准确，获取日期所在节气的代码如下：
function getJq(yyyy, mm, dd) {
mm = mm - 1;
var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
var solarTerms = "";
// 此方法是获取该日期是否为某节气
// var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5));
// var tmp2 = tmp1.getUTCDate();
// if (tmp2==dd)
// solarTerms = solarTerm[mm*2+1];
// console.log(solarTerms);
// tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));
// tmp2= tmp1.getUTCDate();
// if (tmp2==dd)
// solarTerms = solarTerm[mm*2];
// 此方法可以获取该日期处于某节气
while (solarTerms == "") {
var tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2 + 1] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
var tmp2 = tmp1.getUTCDate();
if (tmp2 == dd) solarTerms = solarTerm[mm * 2 + 1];
tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
tmp2 = tmp1.getUTCDate(); if (tmp2 == dd) solarTerms = solarTerm[mm * 2];
if (dd > 1) {
dd = dd - 1;
} else {
mm = mm - 1;
if (mm < 0) {
yyyy = yyyy - 1; mm = 11;
}
dd = 31;
}
}
return solarTerms;
}
百度yyds
然后就比较简单了，对节气进行判断就可以了
$(function () {
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
// 获取节气
let jq = getJq(year, month, day);
if (jq == "立春" || jq == "雨水" || jq == "惊蛰" || jq == "春分" || jq == "清明" || jq == "谷雨") {
img.src = sakuraImage;
} else if (jq == "立夏" || jq == "小满" || jq == "芒种" || jq == "夏至" || jq == "小暑" || jq == "大暑") {
img.src = leafImage;
} else if (jq == "立秋" || jq == "处暑" || jq == "白露" || jq == "秋分" || jq == "寒露" || jq == "霜降") {
img.src = mapleLeavesImage;
} else if (jq == "立冬" || jq == "小雪" || jq == "大雪" || jq == "冬至" || jq == "小寒" || jq == "大寒") {
img.src = snowflakeImage;
}
//开启飘落效果
let system = {};
let p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
if (system.win || system.mac || system.xll) {
//如果是电脑
startFalling();
}
});
js实现代码如下,也可以通过链接获取：https://blog-static.cnblogs.com/files/blogs/601654/falling-effect.v1.js
使用之前需要先引入JQuery
var stop, staticx;
var img = new Image();
// 图片Data URL就不放了，实在是太长了，可以通过链接获取完成代码，也可以替换成自己喜欢的图片
var sakuraImage = "樱花图片";
var mapleLeavesImage = "枫叶图片";
var snowflakeImage = "雪花图片";
var leafImage = "叶子图片";
img.src = sakuraImage;
function FallingObject(x, y, s, r, fn) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn;
}
FallingObject.prototype.draw = function (cxt) {
cxt.save();
var xc = 40 * this.s / 4;
cxt.translate(this.x, this.y);
cxt.rotate(this.r);
cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
cxt.restore();
}
FallingObject.prototype.update = function () {
this.x = this.fn.x(this.x, this.y);
this.y = this.fn.y(this.y, this.y);
this.r = this.fn.r(this.r);
if (this.x > window.innerWidth ||
this.x < 0 ||
this.y > window.innerHeight ||
this.y < 0
) {
this.r = getRandom('fnr');
if (Math.random() > 0.4) {
this.x = getRandom('x');
this.y = 0;
this.s = getRandom('s');
this.r = getRandom('r');
} else {
this.x = window.innerWidth;
this.y = getRandom('y');
this.s = getRandom('s');
this.r = getRandom('r');
}
}
}
FallingObjectList = function () {
this.list = [];
}
FallingObjectList.prototype.push = function (fallingObject) {
this.list.push(fallingObject);
}
FallingObjectList.prototype.update = function () {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].update();
}
}
FallingObjectList.prototype.draw = function (cxt) {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].draw(cxt);
}
}
FallingObjectList.prototype.get = function (i) {
return this.list[i];
}
FallingObjectList.prototype.size = function () {
return this.list.length;
}
function getRandom(option) {
var ret, random;
switch (option) {
case 'x':
ret = Math.random() * window.innerWidth;
break;
case 'y':
ret = Math.random() * window.innerHeight;
break;
case 's':
ret = Math.random();
break;
case 'r':
ret = Math.random() * 6;
break;
case 'fnx':
random = -0.5 + Math.random() * 1;
ret = function (x, y) {
return x + 0.5 * random - 1.7;
};
break;
case 'fny':
random = 1.5 + Math.random() * 0.7
ret = function (x, y) {
return y + random;
};
break;
case 'fnr':
random = Math.random() * 0.03;
ret = function (r) {
return r + random;
};
break;
}
return ret;
}
// 开启飘落效果
function startFalling() {
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var canvas = document.createElement('canvas'),
cxt;
staticx = true;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;z-index: -1;');
canvas.setAttribute('id', 'canvas_sakura');
document.getElementsByTagName('body')[0].appendChild(canvas);
cxt = canvas.getContext('2d');
var fallingObjectList = new FallingObjectList();
for (var i = 0; i < 15; i++) {
var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
randomX = getRandom('x');
randomY = getRandom('y');
randomR = getRandom('r');
randomS = getRandom('s');
randomFnx = getRandom('fnx');
randomFny = getRandom('fny');
randomFnR = getRandom('fnr');
sakura = new FallingObject(randomX, randomY, randomS, randomR, {
x: randomFnx,
y: randomFny,
r: randomFnR
});
sakura.draw(cxt);
fallingObjectList.push(sakura);
}
stop = requestAnimationFrame(function () {
cxt.clearRect(0, 0, canvas.width, canvas.height);
fallingObjectList.update();
fallingObjectList.draw(cxt);
stop = requestAnimationFrame(arguments.callee);
})
}
window.onresize = function () {
var canvasSnow = document.getElementById('canvas_snow');
canvasSnow.width = window.innerWidth;
canvasSnow.height = window.innerHeight;
}
function stopp() {
if (staticx) {
var child = document.getElementById("canvas_sakura");
child.parentNode.removeChild(child);
window.cancelAnimationFrame(stop);
staticx = false;
} else {
startFalling();
}
}
// 获取日期所在节气
function getJq(yyyy, mm, dd) {
mm = mm - 1;
var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
var solarTerms = "";
//　　此方法是获取该日期是否为某节气
// var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5));
// var tmp2 = tmp1.getUTCDate();
// if (tmp2==dd)
// solarTerms = solarTerm[mm*2+1];
// console.log(solarTerms);
// tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));
// tmp2= tmp1.getUTCDate();
// if (tmp2==dd)
// solarTerms = solarTerm[mm*2];
//　　此方法可以获取该日期处于某节气
while (solarTerms == "") {
var tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2 + 1] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
var tmp2 = tmp1.getUTCDate();
if (tmp2 == dd) solarTerms = solarTerm[mm * 2 + 1];
tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
tmp2 = tmp1.getUTCDate(); if (tmp2 == dd) solarTerms = solarTerm[mm * 2];
if (dd > 1) {
dd = dd - 1;
} else {
mm = mm - 1;
if (mm < 0) {
yyyy = yyyy - 1; mm = 11;
}
dd = 31;
}
}
return solarTerms;
}
$(function () {
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
// 获取节气
let jq = getJq(year, month, day);
if (jq == "立春" || jq == "雨水" || jq == "惊蛰" || jq == "春分" || jq == "清明" || jq == "谷雨") {
img.src = sakuraImage;
} else if (jq == "立夏" || jq == "小满" || jq == "芒种" || jq == "夏至" || jq == "小暑" || jq == "大暑") {
img.src = leafImage;
} else if (jq == "立秋" || jq == "处暑" || jq == "白露" || jq == "秋分" || jq == "寒露" || jq == "霜降") {
img.src = mapleLeavesImage;
} else if (jq == "立冬" || jq == "小雪" || jq == "大雪" || jq == "冬至" || jq == "小寒" || jq == "大寒") {
img.src = snowflakeImage;
}
//开启飘落效果
let system = {};
let p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
if (system.win || system.mac || system.xll) {
//如果是电脑
startFalling();
}
});
使用方式如下：
- 将完整代码保存成JS😋
- 上传到自己的博客园文件😛
- 在设置-页脚HTML代码引入js,需要先引入JQuery🤗
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 飘落特效，地址要记得替换成自己的哦，防止失效 -->
<script src="https://blog-static.cnblogs.com/files/blogs/601654/falling-effect.v1.js"></script>
- 保存，打开自己的博客🤣
现在根据季节变化就可以看到不同的飘落效果了，有兴趣的小伙伴可以去试试😉
Original: https://www.cnblogs.com/lm66/p/15127144.html
Author: Liming_Code
Title: 博客园美化-随季节变化实现不同的飘落效果
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/575997/
转载文章受原作者版权保护。转载请注明原作者出处！