悬浮音乐播放器的使用
之前也使用过悬浮音乐播放器,但是是在自己的个人博客中使用的,但如果想要在自己做的网页中如何使用悬浮音乐播放器呢?
试用过了很多的方法,没有找到好用的悬浮音乐播放器的源码,最后使用了以下这个方达,感觉效果真的很不错!
1. 首先是要在这个网站上注册一个账号
https://player.lmih.cn/
然后就可以进入后台页面管理自己的音乐播放器
2. 在后台创建一个播放器
3. 在后台创建一个歌单
歌单由于不是vip不能直接导入歌单,但可以自己自由的添加歌曲。
支持网易云音乐、QQ音乐、酷狗音乐、咪咕音乐
4. 可以在播放器设置里面进行个性设置
注意:如果在线下本地使用这个音乐播放器的话可以使用,如果需要用在云部署的网站,需要给出绑定的域名。
5. 然后直接可以获取播放器的引入代码,就可以直接生成悬浮播放器了
6. 实现效果如下
给出一个样例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script> </head> <body> <script src="https://player.lmih.cn/player/js/player.js" id="myhk" key="158904220953" m="1"></script> </body> </html>
确实是非常方便实用
字体打印效果
第一种:使用字符串切割,函数回调
- 实现代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width:100%; margin:0px auto"> <pre id="language_one" style=" color:#F93; font-size:20px; font-family:华文行楷"></pre> <div style="display:none;" id="language_two"> 我要一个一个的出现,我要一个一个的出,我要一个一个的出。 我要一个一个的出现,我要一个一个的出,我要一个一个的出。 我要一个一个的出现,我要一个一个的出,我要一个一个的出。 我要一个一个的出现,我要一个一个的出,我要一个一个的出。 我要一个一个的出现,我要一个一个的出,我要一个一个的出。 </div> </div> <script language="javascript"> var index=0; var word=document.getElementById("language_two").innerHTML; function type(){ document.getElementById("language_one").innerText = word.substring(0,index++); } setInterval(type, 100); </script> </body> </html>
- 实现效果如下
第二种:在jQuery上挂载一个原型
方法还是字符串切割
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keyword" content=""> <meta name="description" content=""> </head> <style> @font-face { font-family: myfont; src: url('./fonts/蜜桃小公举字体.ttf'); } .autotype{ color:#F93; font-size:20px; font-family:"myfont"; } </style> <body> <div class="autotype" id="autotype"> <p>世界那么大</p> <p>唯你貌美如花</p> <p>唯你完美无瑕</p> <p>送给我最爱的女人</p> <br> <p>妈妈,儿子一直爱你</p> <p>爱你,我只能这样表达</p> <p>无法可修饰的一双手</p> <p>带出温暖永远在背后</p> <p>纵使啰嗦始终关注</p> <p>是你多么温馨的目光</p> <p>教我坚毅望着前路</p> </div> <script src="http://file2.ci123.com/ast/js/jquery_172.js"></script> <script> $.fn.autotype = function () { var $text = $(this); // console.log('this', this); var str = $text.html(); var index = 0; var x = $text.html(''); var timer = setInterval(function () { var current = str.substr(index, 1); if (current == '<') { index = str.indexOf('>', index) + 1; } else { index++; } $text.html(str.substring(0, index) + (index & 1 ? '_' : '')); if (index >= str.length) { clearInterval(timer); } }, 100); }; $("#autotype").autotype(); </script> </body> </html>
实现效果如下
第二种实现的打印效果相对更和谐一点
字体压缩
使用了外部引入的好看的字体文件,然后就有了这样的一个问题,如果将引入了字体文件的html源码部署到了服务器上,那这个页面加载起来就会非常的慢,因为这个引入的外部字体文件就有3M~4M。那要如何解决这样的问题呢。
使用字蛛按需压缩字体文件
字蛛官网:http://font-spider.org/
参考文档:https://blog.csdn.net/weixin_36336604/article/details/77191144
压缩步骤:
1. 需要安装 node.js
2. 输入以下命令: npm install font-spider -g
注意:需要使用管理员权限打开命令框,然后再全局安装
3. 安装成功后就可以使用字蛛的命令
font-spider *.html
示例:压缩上面的引入字体文件
结果如下
* 这是压缩前的字体文件(大小3M多)
* 压缩后的字体文件(大小30KB)
使用字蛛压缩后,效果非常明显
总结
这些都是再昨天搞了一天的一个网页中用到的:
http://mother.qkongtao.cn/
这是自己制作的一个小网页送给我最亲爱的妈妈!
祝天下所有的母亲,母亲节快乐!!!