Hexo 博客優化之博客美化系列（持續更新）

時間 2019-11-13

標籤 hexo 博客優化美化系列持續更新简体版

原文原文鏈接

本文將講述一些Hexo博客的美化，不一樣主題可能方法有些不一樣（本文以做者 luuman 的 spfk 主題和做者 xaoxuu 的 Material X 主題爲例）實際效果歡迎訪問個人博客：https://www.itrhx.com/ 進行查看，本文章會不定時進行更新。文章涉及有關參考資料、教程、連接若有侵權請聯繫我刪除！javascript

歡迎關注個人專欄：《我的博客搭建：Hexo+Github Pages》，從搭建到美化一條龍，幫你解決 Hexo 常見問題！css

推薦閱讀：《Hexo 博客優化之實用功能添加系列（持續更新）》html

文章目錄

● 添加卡通人物（看板娘）

我在逛別人博客的時候偶然發現右下角竟然有一個萌萌的卡通人物，還能根據你鼠標位置搖頭，瞬間被吸引到了，趕忙也給本身博客添加一個吧！點擊此處進入該項目地址java

輸入以下命令獲取 live2d ：node

$ npm install --save hexo-helper-live2d

輸入如下命令，下載相應的模型，將 packagename 更換成模型名稱便可，更多模型選擇請點擊此處，各個模型的預覽請訪問原做者的博客jquery

$ npm install packagename

打開站點目錄下的 _config.yml 文件，添加以下代碼：git

live2d:
	enable: true
	scriptFrom: local
	model: 
		use: live2d-widget-model-haruto #模型選擇
	display: 
		position: right  #模型位置
		width: 150 #模型寬度
		height: 300 #模型高度
	mobile: 
		show: false #是否在手機端顯示

設置好事後咱們就擁有了一個卡通人物
github

● 添加鼠標點擊愛心效果

在 /themes/hexo-theme-spfk/source/js 下新建文件 love.js，在 love.js 文件中添加如下代碼：web

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在 \themes\hexo-theme-spfk\layout\layout.ejs 文件末尾添加如下代碼：shell

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/love.js"></script>

完成以上操做後，當咱們點擊鼠標的時候就能夠看見愛心的特效了

● 添加鼠標點擊顯示字體效果

在 /themes/hexo-theme-spfk/source/js 下新建文件 click_show_text.js，在 click_show_text.js 文件中添加如下代碼：

var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("富強", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業", "誠信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
			3000,
			function() {
			    $i.remove();
			});
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

其中的社會主義核心價值觀能夠根據你本身的創意替換爲其餘文字，而後在 \themes\hexo-theme-spfk\layout\layout.ejs 文件末尾添加如下代碼：

<!--單擊顯示文字-->
<script type="text/javascript" src="/js/click_show_text.js"></script>

最終實現效果以下：

● 添加鼠標點擊煙花爆炸效果

在 \themes\material-x\source\js 目錄下新建一個 fireworks.js 的文件，裏面寫入如下代碼：

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

而後在 \themes\material-x\layout\layout.ejs 文件中寫入如下代碼：

<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>

最終效果：

● 自定義鼠標指針樣式

在 \themes\material-x\source\less\_base.less 文件 body 樣式裏寫入以下代碼：

body {
    cursor: url(https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.6/images/mouse.cur),auto;
    background-color: @theme_background;
    ......
    ......
}

鼠標指針能夠用 Axialis CursorWorkshop 這個軟件本身製做，不一樣主題具體放的文件有所不一樣，確保在博客主體 body 的 CSS 文件中便可，其中的鼠標指針連接可替換成本身的，首先嚐試加載https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.6/images/mouse.cur ，若是該文件不存在或因爲其餘緣由無效，那麼 auto 會被使用，也就是自動默認效果，圖片格式爲.ico、.ani、.cur，建議使用.cur，若是使用.ani或者其餘格式無效，緣由是瀏覽器兼容問題，請閱讀參考文檔或者參考如下兼容表：

瀏覽器	最低版本	格式
Internet Explorer	6.0	.cur / .ani
Firefox (Gecko), Windows and Linux	1.5 (1.8)	.cur / .png / .gif / .jpg
Firefox (Gecko)	4.0 (2.0)	.cur / .png / .gif / .jpg / .svg
Opera	—	—
Safari (Webkit)	3.0 (522-523)	.cur / .png / .gif / .jpg

拓展閱讀：《CSS 鼠標樣式 cursor屬性》（By：歪脖先生的博客）

● 添加彩色滾動變換字體

在你想要添加彩色滾動變換字體的地方寫入如下代碼便可，其中文字可自行更改：

<div id="binft"></div>
  <script> var binft = function (r) { function t() { return b[Math.floor(Math.random() * b.length)] } function e() { return String.fromCharCode(94 * Math.random() + 33) } function n(r) { for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n } function i() { var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } var l = "", o = ["青青陵上柏，磊磊澗中石。", "人生天地間，忽如遠行客。","斗酒相娛樂，聊厚不爲薄。", "驅車策駑馬，遊戲宛與洛。","洛中何鬱郁，冠帶自相索。","長衢羅夾巷，王侯多第宅。","兩宮遙相望，雙闕百餘尺。","極宴娛心意，慼慼何所迫？"].map(function (r) { return r + "" }), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g }; i() }; binft(document.getElementById('binft')); </script>

最終效果：

● 添加背景音樂

打開網頁版網易雲音樂，選擇你準備添加的背景音樂，點擊生成外鏈播放器，前提是要有版權，否則是沒法生成外鏈播放器的，複製底下的HTML代碼

而後將此代碼放到你想要放的地方，好比放在博客的左側，則打開 \themes\hexo-theme-spfk\layout\_partial\left-col.ejs 文件，將複製的HTML代碼粘貼進去，再進行適當的位置設置讓播放器更美觀，其中 auto=1 表示打開網頁自動播放音樂，auto=0 表示關閉自動播放音樂

最後效果以下：

這種網易雲音樂外鏈的方式有不少侷限性，所以推薦使用aplayer，GitHub地址爲：https://github.com/MoePlayer/APlayer ，參考教程：《hexo上的aplayer應用》

● 瀏覽器網頁標題惡搞

當用戶訪問你的博客時點擊到了其餘網頁，咱們能夠惡搞一下網頁標題，呼喚用戶回來，首先在目錄 \Hexo\themes\hexo-theme-spfk\source\js 下新建一個 FunnyTitle.js 文件，在裏面填寫以下代碼：

<!--瀏覽器搞笑標題-->
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/trhx2.png");
         document.title = 'ヽ(●-`Д´-)ノ你醜你就走！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/img/trhx2.png");
         document.title = 'ヾ(Ő∀Ő3)ノ你帥就回來！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

而後在 \Hexo\themes\hexo-theme-spfk\layout\layout.ejs 文件中添加以下代碼：

<!--瀏覽器搞笑標題-->
<script type="text/javascript" src="\js\FunnyTitle.js"></script>

再次部署博客後就能夠看見標題搞笑的效果了：

● 背景添加動態線條效果

在 \Hexo\themes\hexo-theme-spfk\layout\layout.ejs 文件中添加以下代碼：

<!--動態線條背景-->
<script type="text/javascript" color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"> </script>

其中：

color：表示線條顏色，三個數字分別爲(R,G,B)，默認：（0,0,0）
opacity：表示線條透明度（0~1），默認：0.5
count：表示線條的總數量，默認：150
zIndex：表示背景的z-index屬性，css屬性用於控制所在層的位置，默認：-1

最終實現效果：

● 添加人體時鐘等有趣的掛件

無心中發現了個有趣的人體時鐘 HONE HONE CLOCK，做者是個日本人，點擊此處訪問做者博客，點擊此處在做者原博客上查看動態樣式，點擊此處查看動態大圖，若是你的博客上有合適的地方，加上一我的體時鐘會頗有趣的

實現代碼：

<!--人體時鐘背景透明-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

<!--人體時鐘背景白-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>

其餘網頁小掛件推薦：

http://abowman.com/ 裏面有不少有趣的小掛件，能夠養養魚、龜、狗、倉鼠等各式各樣的虛擬寵物，能根據你的鼠標指針位置移動，直接複製代碼就能夠用
http://www.revolvermaps.com/ 它提供網站訪客地理信息，能夠以2D、3D等形式顯示
http://www.amazingcounters.com/ 免費網站計數器，有很是多的樣式供你選擇，能夠設置計數器初始數值，能夠設置按訪問量計數，也能夠按獨立訪問者計數
https://www.seniverse.com/widget/get 心知天氣提供基於Web的免費天氣插件，能夠爲你的網站添加一項簡潔美觀的天氣預報功能，並自動適配PC和手機上的瀏覽

● 添加網站雪花飄落效果

樣式一和樣式二分別以下：

實現方法：在 \Hexo\themes\hexo-theme-spfk\source\js 目錄下新建一個 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).remove()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 5, /* 定義雪花最小尺寸 */
	    maxSize: 50,/* 定義雪花最大尺寸 */
	    newOn: 300  /* 定義密集程度，數字越小越密集 */
    });
});

/*樣式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置屬性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* 最多片數 */
    this.flakeSize = snow.flakeSize || 10;  /* 雪花形狀 */
    this.fallSpeed = snow.fallSpeed || 1;   /* 墜落速度 */
}
/* 兼容寫法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
	window.oCancelAnimationFrame;
/* 開始下雪 */
snowFall.prototype.start = function(){
    /* 建立畫布 */
    snowCanvas.apply(this);
    /* 建立雪花形狀 */
    createFlakes.apply(this);
    /* 畫雪 */
    drawSnow.apply(this)
}
/* 建立畫布 */
function snowCanvas() {
    /* 添加Dom結點 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改變的處理 */
    window.onresize = function() {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪運動對象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);   /* x座標 */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y座標 */
    this.size = Math.random() * flakeSize + 2;          /* 形狀 */
    this.maxSize = flakeSize;                           /* 最大形狀 */
    this.speed = Math.random() * 1 + fallSpeed;         /* 墜落速度 */
    this.fallSpeed = fallSpeed;                         /* 墜落速度 */
    this.velY = this.speed;                             /* Y方向速度 */
    this.velX = 0;                                      /* X方向速度 */
    this.stepSize = Math.random() / 30;                 /* 步長 */
    this.step = 0                                       /* 步數 */
}
flakeMove.prototype.update = function() {
    var x = this.x,
        y = this.y;
    /* 左右擺動(餘弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飛出邊界的處理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飛出邊界-放置最頂端繼續墜落 */
flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-隨機形狀（此處可修改雪花顏色！！！）
flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此處是雪花顏色，默認是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改成其餘顏色，請自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16進制的RGB 顏色代碼。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 建立雪花-定義形狀 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 畫雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /* 一幀一幀的畫 */
    this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
    });
}
/* 調用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

而後在 \Hexo\themes\hexo-theme-spfk\layout\layout.ejs 文件裏引用便可：

<!-- 雪花特效 -->
<script type="text/javascript" src="\js\snow.js"></script>

若是沒效果，請確認網頁是否已載入JQurey，若是沒有請在下雪代碼以前引入JQ便可：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

原文連接：《分享兩種聖誕節雪花特效JS代碼(網站下雪效果)》

● 添加背景動態綵帶效果

樣式一是鼠標點擊後綵帶自動更換樣式，樣式二是飄動的綵帶：

實現方法：在 \themes\material-x\layout\layout.ejs 文件的body前面添加以下代碼：

<!-- 樣式一（鼠標點擊更換樣式） -->
<script src="https://g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script>

<!-- 樣式二（飄動的綵帶） -->
<script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script>

● 添加背景代碼雨特效

新建 DigitalRain.js，寫入如下代碼：

window.onload = function(){
    //獲取畫布對象
    var canvas = document.getElementById("canvas");
    //獲取畫布的上下文
    var context =canvas.getContext("2d");
    var s = window.screen;
    var W = canvas.width = s.width;
    var H = canvas.height;
    //獲取瀏覽器屏幕的寬度和高度
    //var W = window.innerWidth;
    //var H = window.innerHeight;
    //設置canvas的寬度和高度
    canvas.width = W;
    canvas.height = H;
    //每一個文字的字體大小
    var fontSize = 12;
    //計算列
    var colunms = Math.floor(W /fontSize);	
    //記錄每列文字的y軸座標
    var drops = [];
    //給每個文字初始化一個起始點的位置
    for(var i=0;i<colunms;i++){
        drops.push(0);
    }
    //運動的文字
    var str ="WELCOME TO WWW.ITRHX.COM";
    //4:fillText(str,x,y);原理就是去更改y的座標位置
    //繪畫的函數
    function draw(){
        context.fillStyle = "rgba(238,238,238,.08)";//遮蓋層
        context.fillRect(0,0,W,H);
        //給字體設置樣式
        context.font = "600 "+fontSize+"px Georgia";
        //給字體添加顏色
        context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();能夠rgb,hsl, 標準色，十六進制顏色
        //寫入畫布中
        for(var i=0;i<colunms;i++){
            var index = Math.floor(Math.random() * str.length);
            var x = i*fontSize;
            var y = drops[i] *fontSize;
            context.fillText(str[index],x,y);
            //若是要改變時間，確定就是改變每次他的起點
            if(y >= canvas.height && Math.random() > 0.99){
                drops[i] = 0;
            }
            drops[i]++;
        }
    };
    function randColor(){//隨機顏色
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb("+r+","+g+","+b+")";
    }
    draw();
    setInterval(draw,35);
};

在主題文件的相關css文件中（以 Material X 1.2.1 主題爲例，在\themes\material-x-1.2.1\source\less\_main.less 文件末尾）添加如下代碼：

canvas {
  position: fixed;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  z-index: -1;
}

而後在主題的 layout.ejs 文件中引入便可：

<!-- 數字雨 -->
  <canvas id="canvas" width="1440" height="900" ></canvas>
  <script type="text/javascript" src="/js/DigitalRain.js"></script>

最終效果：

代碼來源：http://www.lxl8800.cn/Main/Resource

未完待續…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。