博客側邊欄

感謝：http://www.javashuo.com/article/p-ssleetop-e.html

 

博客側邊欄公告（支持HTML代碼）（支持JS代碼）

<style>
#canvas{position:absolute;left:0px;top:0px;z-index:5;}
#main{position:relative;z-index:10;}
</style>

<p class='phrase' style="font-size: 13px; padding: 10px; margin-bottom: 10px; border: 1px dashed #FFF; color: #FF3399">
Bamboo Lamp<br><br>
就像竹林的燈火，被風吹過，搖搖曳曳，但永不熄滅!
</p>
<table class="dataintable" style="text-align: center; width: 100%">
<tbody><tr>
<td style=" width: 16%; height: 20px; background-color: #FF0000" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF0033" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF0066" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF0099" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF00CC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF00FF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FF3300" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF3333" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF3366" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF3399" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF33CC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF33FF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FF6600" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF6633" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF6666" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF6699" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF66CC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF66FF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FF9900" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF9933" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF9966" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF9999" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF99CC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF99FF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FFCC00" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCC33" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCC66" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCC99" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCCCC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCCFF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FFFF00" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFF33" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFF66" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFF99" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFFCC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFFFF" ></td>
</tr>
</tbody></table>
<script>

function displayColor() {
document.getElementsByClassName("phrase")[0].style.color= this.style.backgroundColor;

}
window.onload = function(){// 頁面加載完了以後再處理
var td = document.querySelectorAll('.dataintable td');
for(var i=0;i<td.length;i++){
td[i].onmouseover = displayColor;
}
var canvas = document.getElementById('canvas');
var body = document.getElementsByTagName('body')[0];
canvas.width = body.clientWidth;
canvas.height = body.clientHeight;
var bound = canvas.getBoundingClientRect();// 這個叫作獲取邊界客戶端矩形，能夠用來獲取canvas的長寬
var ctx = canvas.getContext('2d');// 獲取canvas的上下文環境（能夠理解爲買下一個畫筆）
var width = bound.width, height = bound.height;
var circleConfig = {// 配置信息
ballNums: height/10+100,// 球的數量
maxLineLength:150,//最大線長
fillColor: 'rgba(255, 255, 255, .5)',// 球的填充顏色
radius: 1// 球的半徑
};
var circle = new Circle(circleConfig);// 初始化球
circle.init();// 初始化
var zoom=function(e){ // 這個函數是用來縮放球的大小的，簡單作了個縮放改變球的效果，目前可能就在chrome下有用
var e = e || window.event;
if (!e.deltaX) {// 縮放的時候這個值是爲0或-0的
if (e.deltaY < 0) {// 小於0好像是放大吧
if (circleConfig.radius) {
circleConfig.radius = null;
var circle = new Circle({
ballNums: 300,
fillColor: 'rgba(255, 255, 255, .5)',
// radius: 1
});
circle.init();
}

}
else {
if (!circleConfig.radius) {
circleConfig.radius = 1;
var circle = new Circle({
ballNums: 300,
fillColor: 'rgba(255, 255, 255, .5)',
radius: 1
});
circle.init();
}
}
}
if(e.wheelDelta && event.ctrlKey){// 禁止網頁縮放
event.returnValue = false
}else if(e.detail){

event.returnValue = false;
}
}
if(document.addEventListener){
//document.addEventListener('DOMMouseScroll' , zoom , false); // 兼容火狐
}
//window.onmousewheel = document.onmousewheel = zoom;// 除火狐以外的瀏覽器
function Circle(o) {// 好了，這裏纔是故事真正開始的地方
o = o || {};
this.instance = [];// 能夠理解爲實例數組，用來存球的
this.maxLineLength = o.maxLineLength || 100;// 最大線長度，就是2個球在這個距離內會在之間畫根線
function Ball() {
this.radius = o.radius || (o.MaxRadius || 20) * Math.random();
this.startDeg = 0;// 開始角度
this.endDeg = Math.PI * 2;// 終結角度
this.clockWay = false; // 順時針仍是逆時針
this.fillColor = o.fillColor || randomColor();// 填充顏色
this.borderColor = 'transparent';// 球的border設置爲透明的否則難看
this.dirX = 1;// 球的水平方向（控制正反）
this.dirY = 1;// 如上
this.speed = o.speed || 1.5 * Math.random() - 0.5;// 球的移動速度
this.speed2 = o.speed || 1.5 * Math.random() - 0.5;// 球的移動速度
this.X = getRandom(width);// 這裏是初始化球的起始位置，值是0-width
this.Y = getRandom(height);
this.resetDir = function() {// 控制方向
// X的位置若是小於半徑或者大於canvas的寬度-半徑就改變方向，Y同理
if (this.X < this.radius || this.X > width - this.radius) {
this.dirX = -this.dirX;
}
if (this.Y < this.radius || this.Y > height - this.radius) {
this.dirY = -this.dirY;
}
};
this.init = function() {// 球的初始化
this.move();
};
this.move = function() {// 這個就是移動球，每執行一次就檢查方向和改變XY的帶系喔啊
this.resetDir();
this.X += this.dirX * this.speed;// 移動
this.Y += this.dirY * this.speed2;
};

}
this.ball = {
};
this.arc = function() {// 畫圓函數
// ctx.translate(this.X, this.Y);
for (var i = 0; i < this.instance.length; i++) {
var ball = this.instance[i];// 從實例數組中取出來
/* 不須要畫圓
// ctx.save();// 保存狀態
ctx.fillStyle = ball.fillColor;// 球的填充顏色 (準備好填充顏料)
ctx.strokeStyle = ball.borderColor;// 球的線就是border（理解爲準備好顏料）
ctx.beginPath();// 開始路徑，能夠理解爲拿起畫筆
ctx.arc(ball.X, ball.Y, ball.radius, ball.startDeg, ball.endDeg, this.clockWay);// 畫圓
ctx.fill(); // 填充圓（就至關於給圓上色）
ctx.closePath();// 放下筆
*/
// ctx.restore();
for(var j = 0; j < this.instance.length; j++) {
var s = Math.pow(ball.X - this.instance[j].X, 2) + Math.pow(ball.Y - this.instance[j].Y, 2);
s = Math.sqrt(s);// 獲取圓與圓之間的距離，x的平方加y的平方而後開根號，初中數學知識
if (s < this.maxLineLength) {// 判斷何時能夠畫線
ctx.beginPath();
ctx.moveTo(ball.X, ball.Y);// 把筆移動到
ctx.lineTo(this.instance[j].X, this.instance[j].Y);// 畫線到這個位置
ctx.strokeStyle = 'rgba(255, 255, 255, ' + (this.maxLineLength - s) / (this.maxLineLength * 1.3)+')';//
// 上面是調整線的顏色
ctx.strokeWidth = 1;// 線寬
ctx.stroke();// 畫
ctx.closePath();
}
}
}
};
this.draw = function() {
ctx.clearRect(0,0,width,height);// 你要是把這個給注了你會發現不同的世界
this.arc();// 執行畫圓函數
};
this.move = function() {
for(var i = 0; i < this.instance.length; i++) {
var ball = this.instance[i];
ball.init();// 球的初始化函數，其實跟ball.move()是同樣的，就是改變球的位置

}
this.draw();
requestAnimationFrame(this.move.bind(this));// 這裏用bind是強行改變move函數的上下文環境，否則在requestAnimationFrame中的this會變得
// requestAnimationFrame 請求動畫幀，能夠理解爲控制函數執行的頻率（原本這裏能夠用遞歸執行，可是遞歸控制不了頻率，會卡死頁面的，setTimeout也能夠實現相似的效果）
};
this.init = function() {
for(var i = 0; i < o.ballNums; i++) {
this.instance.push(new Ball()); // 初始化球
}
this.move();
};

}
function getRandom(s) {
return Math.ceil(Math.random() * s);// 獲取0 -（s-1）之間的值
}
function randomColor() {
return 'rgba('+getRandom(255)+','+getRandom(255)+','+getRandom(255)+','+Math.random()+')';
};
};

</script>

 

頁首Html代碼

<canvas id="canvas" >

</canvas>
<div style="text-align: left; margin: 0px 20px 21px; padding-bottom: 10px; font-size: 12px; font-weight: bold; border-bottom: 1px dashed #ffffff; color:#ff9933">
一藝之成，當盡畢生之力！
</div>

 

頁腳Html代碼

<div class="cnblogs_Highlighter">
<div style="text-align: left; margin: 0 17px">
<p> <a target="_blank" href="http://www.w3school.com.cn/index.html">w3school 在線教程</a> | 
<a target="_blank" href="https://www.cnblogs.com/">博客園</a> | 
<a target="_blank" href="https://www.sxsoft.com/">sxsoft</a> | 
<a target="_blank" href="http://www.52solution.com/kb/">快包網</a> </p> </div>
</div>