博客美化【1】-2020.03.19

1.鼠标点击特效

在页首插入这段代码就可以拥有鼠标点击特效了，内容可在数组中修改

  
 1 
 2 /* 鼠标特效 */
 3 var a_idx = 0;
 4 jQuery(document).ready(function($) {
 5 $("body").click(function(e) {
 6 var a = new Array("❤Linux❤","❤Shell❤","❤Script❤","❤Mysql❤","❤Apache❤","❤Love❤","❤JavaScript❤","❤","❤Java❤");
 7 var $i = $("").text(a[a_idx]);
 8 a_idx = (a_idx + 1) % a.length;
 9 var x = e.pageX,
10 y = e.pageY;
11 $i.css({
12 "z-index": 99999999999999999999,
13 "top": y - 20,
14 "left": x,
15 "position": "absolute",
16 "font-weight": "bold",
17 "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
18 });
19 $("body").append($i);
20 $i.animate({
21 "top": y - 180,
22 "opacity": 0
23 },
24 1500,
25 function() {
26 $i.remove();
27 });
28 });
29 });

效果图如下

2.页脚飞鱼特效

在页首导入js(加个反斜杠防止被执行)

 
1 <\script src="https://blog-static.cnblogs.com/files/hgy1044/fishb.js"><\/script>

在页脚插入这段代码

 
1 <\div id="jsi-flying-fish-container" class="" ><\/div>

效果图如下

3.吸底音乐播放器

先导入Aplayer，再导入MetingJS

 
 1 <\!-- require APlayer -->
 2 <\link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
 3 <\script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js">
 4 <\!-- require MetingJS -->
 5 <\script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js">
 6 <\meting-js
 7     server="netease"
 8     type="playlist"
 9     id="4920019531"
10     fixed="true"
11 >
12 <\/meting-js>
13 <\a href="#navigator" class="upToNav">

效果图如下

先贴出他的官方文档，详细参数配置可上官方文档查询

https://github.com/MoePlayer/APlayer https://github.com/metowolf/MetingJS

其中MetingJS中有几个参数比较常用可修改的
• server参数：必备参数，为音乐平台：netease，tencent，kugou，xiami，baidu 这几个平台分别为网易云音乐，qq音乐，酷狗音乐，虾米音乐，百度音乐
• type参数：必备参数，参数为：song，playlist，album，search，artist，分别是单曲，歌单，专辑，搜索，歌手
• id参数：必备参数，参数为歌曲ID /播放列表ID /专辑ID /搜索关键字
• fixed参数：默认为false，修改为true可成为吸底模式
• mini参数：默认为false，修改为true可成为迷你模式
• 注：有些歌曲由于版权原因是无法播放在外网的，只能在官方播放器里面听