博客園美化踩坑之路
1.美化前的準備
首先要先申請支持js代碼，申請js代碼頁面在博客后臺——設定——博客側邊欄公告——申請開通js代碼
2.添加網易云音樂設定
創建歌單就不用我在演示了吧，玩網易的人都會，我主要講的是如何生成網易云音樂外鏈，
在網頁版的網易云音樂歌單頁面，右擊滑鼠有一個檢測功能，這是我提取出來的部分外鏈地址/outchain/0/5019496415/，完整的外鏈需要結合
https://music.163.com/#/outchain/0/5019496415/ 這是我結合成功的外鏈如圖所示
我這里直接貼出我實驗成功的代碼
<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="https://www.cnblogs.com//music.163.com/outchain/player?type=0&id=5019496415&auto=0&height=90"></embed>
有人會好奇我的html代碼和網易云生成的外鏈不一樣，這是因為博客園不支持網易云音樂開頭的iframe 標簽，所以我把它改成embed 就能使用網易云音樂了，
另外還有一個坑，不是所以的歌曲都能播放，在獲取成功的外鏈界面用滑鼠點擊一下，有不能播放的歌曲就從歌單里面洗掉就行了，不然歌曲會卡在那里不在主動播放音樂，音樂播放是可控的auto=0為不自動播放，當auto=1時，表示音樂自動播放，
3.動態雪花設定
效果如下
直接貼出代碼
<script type="text/javascript"> window.onload = function () { var minSize = 15; //最小字體 var maxSize = 30;//最大字體 var newOne = 600; //生成雪花間隔 var flakColor = "#1bd3ff"; //雪花顏色 var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("?");//定義一個雪花 var dhight = $(window).height(); //定義視圖高度 var dw =$(window).width()-80; //定義視圖寬度 setInterval(function(){ var sizeflak = minSize+Math.random()*maxSize; //產生大小不等的雪花 var startLeft = Math.random()*dw; //雪花生成是隨機的left值 var startOpacity = 0.7+Math.random()*0.3; //隨機透明度 var endTop= dhight-100; //雪花停止top的位置 var endLeft= Math.random()*dw; //雪花停止的left位置 var durationfull = 5000+Math.random()*3000; //雪花飄落速度不同 flak.clone().appendTo($("body")).css({ "left":startLeft , "opacity":startOpacity, "font-size":sizeflak, "color":flakColor }).animate({ "top":endTop, "left":endLeft, "apacity":0.1 },durationfull,function(){ $(this).remove() }); },newOne); } </script>
讓你看一下我設定位置，代碼存放位置看個人喜好
圖片如下
添加滑鼠點擊特效
直接貼出代碼
<script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?喜歡就關注一下吧?","?不是點這里哦?","?快去點贊?","?在文章最下面哦?","?快去推薦一下吧?","?感謝觀看?","?"); 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>
讓你看一下我的存放位置
圖片如下
4.看板娘設定
效果圖如下
首先需要上傳幾個js和css檔案到直接的檔案空間，檔案地址下載url:復制這段內容后打開百度網盤手機App，操作更方便哦 鏈接:https://pan.baidu.com/s/1fL9EeYNu4ZO_6eRtB1xkvQ 提取碼:j7ag
檔案上傳處如圖
flat-ui.min.css（看板娘右面的選項，可以不配置此檔案）
live2d.min.js（一些點擊之后的動作）
waifu.css/waifu1.css（看板娘在頁面的位置以及大小，兩個檔案根據自己需求2選1，分別是左下角和右下角）
waifu-tips.js（看板娘的語言設定）
另外還要在后臺設定組態檔
我存放代碼的位置圖片如下，紅線是網易音樂代碼，我把他們放在一起了
我實作的代碼如下，再次強調，我把網易云音樂也放里面了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/grow-blog/waifu1.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
embed
{
position: fixed;
bottom: 0;
left: 0;
}
</style>
<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="https://www.cnblogs.com//music.163.com/outchain/player?type=0&id=5019496415&auto=0&height=90">
<div id="waifu">
<div style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" ></canvas>
<div >
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/grow-blog/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/grow-blog/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/grow-blog/flat-ui.min.css"/>
</body>
</html>
看板娘代碼配置詳解如下
沒有經過修改的原始碼，上面添加音樂的代碼是我修改過后的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/228721.html
標籤：其他
上一篇：CSRF&SSRF-初探準備
下一篇：視頻使用教程