正在使用:
保罗的小宇宙
示例:
这是一篇示例文章。Hi,我叫保罗。来自广东,是个学习中的前后端全栈程序员。目前是原生主义者,暂未使用任何其他 UI 框架进行过开发。喜欢自造轮子,热衷于研究其实现方式和原理。与此同时,我还会尝试自己修理电脑、手机等电子产品。通过写日记、主持电台、剪辑视频的方式记录我的折腾过程和生活经历。
我是个喜欢二次元的童鞋。除了对专业有热情,我在空余时间会静下心来看番。从国漫、美漫到日漫,我都有所关注。喜欢的有国漫《摩尔庄园》、《开心宝贝》、《京剧猫》,来自迪士尼、梦工厂、福克斯的美漫,以及日漫《雏子的笔记》、《漫画女孩》、《工作细胞》等等。同时也尝试过自己设计一个卡通形象,也就是下面这位啦。
使用教程:
在网页 head
标签引用项目的 CSS 文件 SQPlayer.css
:
<head>
...
<link href="SQPlayer.css" rel="stylesheet" type="text/css"/>
...
</head>
在网页 body
标签内的最后一行引用项目的 JS 文件 SQPlayer.js
:
<body>
...
<script src="SQPlayer.js"></script>
</body>
在网页 body
标签内插入一个 sqplayer
标签:
<body>
...
<sqplayer></sqplayer>
...
</body>
Square Player 支持以下属性,他们分别的意义是:
属性名 |
用途 |
right |
至右显示 |
data-title |
歌曲名 |
data-artist |
艺术家 |
data-cover |
专辑封面图片链接 |
data-link |
歌曲地址 |
data-163 |
网易云音乐的 ID 或歌名 |
如果使用 data-163
属性引用播放器,就写成这样,其中 23682511
就是一首歌的 ID。
<sqplayer data-163="23682511"></sqplayer>
如果使用静态方法引用播放器,就需要同时编写四个属性。
<sqplayer right data-title="Crimson & Clover" data-artist="Tommy James" data-cover="封面链接" data-link="歌曲链接"></sqplayer>
Enjoy it!