Get几个小技能——悬浮音乐播放器、字体压缩和打印效果

目录

  • 悬浮音乐播放器的使用
  • 字体打印效果
    • 第一种:使用字符串切割,函数回调
    • 第二种:在jQuery上挂载一个原型
  • 字体压缩
  • 总结

悬浮音乐播放器的使用

   之前也使用过悬浮音乐播放器,但是是在自己的个人博客中使用的,但如果想要在自己做的网页中如何使用悬浮音乐播放器呢?
试用过了很多的方法,没有找到好用的悬浮音乐播放器的源码,最后使用了以下这个方达,感觉效果真的很不错!

  1. 首先是要在这个网站上注册一个账号
    https://player.lmih.cn/
    然后就可以进入后台页面管理自己的音乐播放器
  2. 在后台创建一个播放器
  3. 在后台创建一个歌单
    歌单由于不是vip不能直接导入歌单,但可以自己自由的添加歌曲。
    Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第1张图片
    支持网易云音乐、QQ音乐、酷狗音乐、咪咕音乐
  4. 可以在播放器设置里面进行个性设置
    Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第2张图片
    注意:如果在线下本地使用这个音乐播放器的话可以使用,如果需要用在云部署的网站,需要给出绑定的域名。
  5. 然后直接可以获取播放器的引入代码,就可以直接生成悬浮播放器了
    Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第3张图片
  6. 实现效果如下
    给出一个样例代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第4张图片
确实是非常方便实用

字体打印效果

第一种:使用字符串切割,函数回调

  • 实现代码如下

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>
  • 实现效果如下
    Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第5张图片

第二种:在jQuery上挂载一个原型

方法还是字符串切割


<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>

实现效果如下
Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第6张图片
第二种实现的打印效果相对更和谐一点

字体压缩

使用了外部引入的好看的字体文件,然后就有了这样的一个问题,如果将引入了字体文件的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
    示例:压缩上面的引入字体文件
    Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第7张图片

结果如下

  • 这是压缩前的字体文件(大小3M多)
    Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第8张图片
  • 压缩后的字体文件(大小30KB)
    Get几个小技能——悬浮音乐播放器、字体压缩和打印效果_第9张图片
    使用字蛛压缩后,效果非常明显

总结

这些都是再昨天搞了一天的一个网页中用到的:
http://mother.qkongtao.cn/
这是自己制作的一个小网页送给我最亲爱的妈妈!
祝天下所有的母亲,母亲节快乐!!!

你可能感兴趣的:(css,javacript,Web前端)