首页 > 其他分享 >博客园美化--音乐播放器和鼠标特效

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

时间:2023-01-05 12:45:05浏览次数:42  
标签:播放器 特效 鼠标 idx -- 博客园 var id

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

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

1 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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后,在点击鼠标时就会有特效。

 

标签:播放器,特效,鼠标,idx,--,博客园,var,id
From: https://www.cnblogs.com/daitu66/p/17027219.html

相关文章

  • python字典推导式生成法用法
    prices={"aaa":166,"bbb":56,"cdfsa":133,"fs":22,"Sy":233.34}#生成式(推导式)的用法#用股票价格大于100元的股票构造一个新的字典prices......
  • 一些常用命令
    1.查看当前IP地址:ifconfig|grepinet2.启动API:phpartisanserve--host=0.0.0.03.查看larval的命令:phpartisanlist4.开启docker,进入到对应文件夹docker......
  • 2022 ICPC Gran Premio de Mexico Repechaje
    链接:https://codeforces.com/gym/104120A.AverageWalk#include"bits/stdc++.h"usingnamespacestd;usingi64=longlong;voidsolve(){intn;cin>>n......
  • 辅助知识
    1、getResources​​classloader.getresources()介绍​​​​Class.getResources()和classLoader.getResources()区别​​2、HashTable详解​​HashTable详解​​​​HashTa......
  • CorsFilter跨域
    1、​​CORS跨域实现思路及相关解决方案​​2、​​spring跨域CORSFilter​​3、​​springboot设置cors跨域请求的两种方式​​4、​​CORSFilter解决前端跨域请求问题​......
  • jeasypoi-base
    1、​​EasyPoi教程​​2、​​EasyPOI教程以及完整工具类的使用​​3、​​【springboot+easypoi】一行代码搞定excel导入导出​​4、​​Excel和Word简易工具类,JEasyPoi......
  • Spring MVC
    1、​​SpringMVC—@RequestMapping原理讲解-1​​2、​​SpringMVC—@RequestMapping原理讲解-2​​3、​​SpringMVC判定返回view的依据​​4、​​SpringMVC源......
  • Spring源码分析
    一、Java注解​​全面解析JAVA注解​​​​JAVA注解的基本原理​​​​秒懂,Java注解(Annotation)你可以这样学​​​​Java编译时注解处理器(APT)详解​​二、Java反射​​Ja......
  • 第二十一章《万年历》第1节:万年历项目简介
    ​万年历项目实现的是一款日历软件,它能够展示出任意年份的日历,除此之外,该软件还能以红色字体标出每个月的阳历节日。21.1.1万年历功能简介万年历软件的运行结果如图21-1所示......
  • 视频码率、分辨率、帧率的关系
    视频带宽计算公式(码流_分辨率_帧率)  (自己整理过的.)码流码流(DataRate)是指视频文件在单位时间内使用的数据流量,也叫码率或码流率,是视频编码中画面质量控制中最重要的......