博客园美化--音乐播放器和鼠标特效

去大佬哪里学习了一下,知道了如何美化博客园一些,首先是在博客园添加音乐播放器

在页尾html代码插入如下代码

1 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
2  <script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js"></script>
3 <div id="aplayer" class="aplayer"  data-id="7851143010" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-autoplay="true" data-order="random" data-theme="#F58EA8"></div>
4 <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

其中data-id为音乐歌单,你可以自己设置,data-autoplay是自动播放,如果不想一打开博客随笔就自动播放,可以去掉

如何设置data-id

首先要登录自己网易云,记住是网页版,因为软件不可以,

登录网易云后,打开自己歌单,找到生成外链播放器

 

点击那个外链播放后

 

 找到id,把最后一串数字复制,替换成data-id后边的数字。就是播放自己的歌单了

鼠标特效美化

 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("❤带土❤","❤阿飞❤","❤写轮眼❤","❤神威❤","❤入目皆是琳❤");
 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": 999999999999999999999999999999999999999999999999999999999999999999999,
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         3000,
25         function() {
26             $i.remove();
27         });
28     });
29 });
30 </script>
 var a = new Array("❤带土❤","❤阿飞❤","❤写轮眼❤","❤神威❤","❤入目皆是琳❤");里边的文字可以按自己喜欢替换。
把代码写入页尾html后,在点击鼠标时就会有特效。

 

posted @ 2023-01-05 12:28  阿飞藏泪  阅读(213)  评论(0编辑  收藏  举报
1 2 3
4