博客美化【1】-2020.03.19

1.鼠标点击特效

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

 1 <script type="text/javascript">
 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 = $("<span></span>").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 });
30 </script>

2.页脚飞鱼特效

在页脚插入这段代码

1 <div id="jsi-flying-fish-container" class="" ></div>
2 <script src="https://blog-static.cnblogs.com/files/hgy1044/fishb.js"></script>

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"></script>
 4 <!-- require MetingJS -->
 5 <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
 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"></a>

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

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可成为迷你模式

  • 注:有些歌曲由于版权原因是无法播放在外网的,只能在官方播放器里面听

猜你喜欢

转载自www.cnblogs.com/hgy1044/p/12527380.html
今日推荐