博客园初始化
1.新建主题
借鉴这位大佬的主题https://www.cnblogs.com/gshang/p/biliTheme.html
2.
（1）樱花飘落效果
在博客侧边栏公告（首先支持 JS 代码）加入下面1行代码便可以拥有同博主的樱花特效.
<script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script>
原理：
//樱花 Quaint 修改版
var stop, staticx;
var img = new Image();
img.src = "这里原js作者高明操作,请看源码,如何进制转成樱花";
// 樱花数量 (添加)
var sakuraNum = 21;
// 樱花越界限制次数, -1不做限制,无限循环 (添加)
var limitTimes = 2;
// 定义限制数组 (添加)
var limitArray = new Array(sakuraNum);
for(var index = 0;index < sakuraNum;index++){
limitArray[index] = limitTimes;
}
// 定义樱花, idx 是修改添加的
function Sakura(x, y, s, r, fn, idx) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn;
this.idx = idx;
}
// 绘制樱花
Sakura.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();
}
// 修改樱花位置,模拟飘落.
Sakura.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) {
// 如果樱花不做限制
if (limitArray[this.idx] == -1) {
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');
}
}
// 否则樱花有限制
else {
if (limitArray[this.idx] > 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');
}
// 该越界的樱花限制数减一
limitArray[this.idx]--;
}
}
}
}
SakuraList = function() {
this.list = [];
}
SakuraList.prototype.push = function(sakura) {
this.list.push(sakura);
}
// list update 方法
SakuraList.prototype.update = function() {
for(var i = 0, len = this.list.length; i < len; i++) {
this.list[i].update();
}
}
// list draw 方法
SakuraList.prototype.draw = function(cxt) {
for(var i = 0, len = this.list.length; i < len; i++) {
this.list[i].draw(cxt);
}
}
SakuraList.prototype.get = function(i) {
return this.list[i];
}
SakuraList.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 startSakura() {
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;');
canvas.setAttribute('id', 'canvas_sakura');
document.getElementsByTagName('body')[0].appendChild(canvas);
cxt = canvas.getContext('2d');
var sakuraList = new SakuraList();
// sakuraNum 樱花个数 (原版为50个)
for(var i = 0; i < sakuraNum; 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 Sakura(randomX, randomY, randomS, randomR, {
x: randomFnx,
y: randomFny,
r: randomFnR
}, i);
sakura.draw(cxt);
sakuraList.push(sakura);
}
stop = requestAnimationFrame(function() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
// 修改樱花位置逻辑
sakuraList.update();
// 画出修改后的樱花
sakuraList.draw(cxt);
// 递归 修改位置, 画出修改后的樱花
stop = requestAnimationFrame(arguments.callee);
})
}
window.onresize = function() {
var canvasSnow = document.getElementById('canvas_snow');
// canvasSnow 在改变浏览器大小的时候会为null (修改空指针异常), 不过在改变大小时体验稍差
if (canvasSnow) {
canvasSnow.width = window.innerWidth;
canvasSnow.height = window.innerHeight;
}
}
img.onload = function() {
startSakura();
}
// 没看懂哪里调用了, 应该是关闭樱花特效的方法. 还请大佬们解释自己是怎么使用的.
function stopp() {
if(staticx) {
var child = document.getElementById("canvas_sakura");
child.parentNode.removeChild(child);
window.cancelAnimationFrame(stop);
staticx = false;
} else {
startSakura();
}
}
（2）动态雪花效果
在页面定制CSS代码中加入以下代码
#Snow{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(255,255,240,0.1); pointer-events: none;}
在侧边公告栏加入
<div class="Snow">
<canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>
3.鼠标效果
(1)点击显示特效文字
在html页脚添加
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤welcome to❤","❤博客园❤","❤辣條先生❤","❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
(2).自定义鼠标样式
- 上传背景图片到服务器（在
博客设置-> 文件中上传，上传前将图片后缀改为.ico） 博客设置-> 设置中页面定制 CSS 代码
body {
cursor: url('https://blog-static.cnblogs.com/files/lucas--liu/cat6.ico'), auto;
}
（借鉴原博客https://www.cnblogs.com/lucas--liu/p/mouse_custom_cursor.html）
4.修改标签栏ico
<script type="text/javascript" language="javascript">
//Setting ico for cnblogs
var linkObject = document.createElement('link');
linkObject.rel = "shortcut icon";
linkObject.href = "ico图片链接";
document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
浙公网安备 33010602011771号