CSS

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

Nick · 5月10日 · 2020年 · 本文2973字 · 阅读8分钟977

悬浮音乐播放器的使用

   之前也使用过悬浮音乐播放器,但是是在自己的个人博客中使用的,但如果想要在自己做的网页中如何使用悬浮音乐播放器呢?
试用过了很多的方法,没有找到好用的悬浮音乐播放器的源码,最后使用了以下这个方达,感觉效果真的很不错!
1. 首先是要在这个网站上注册一个账号
https://player.lmih.cn/
然后就可以进入后台页面管理自己的音乐播放器
2. 在后台创建一个播放器
3. 在后台创建一个歌单
歌单由于不是vip不能直接导入歌单,但可以自己自由的添加歌曲。
Get几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客
支持网易云音乐、QQ音乐、酷狗音乐、咪咕音乐
4. 可以在播放器设置里面进行个性设置
Get几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客
注意:如果在线下本地使用这个音乐播放器的话可以使用,如果需要用在云部署的网站,需要给出绑定的域名。
5. 然后直接可以获取播放器的引入代码,就可以直接生成悬浮播放器了
Get几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客
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>

Get几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客
确实是非常方便实用

字体打印效果

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

  • 实现代码如下
<!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>
  • 实现效果如下
    Get几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客

第二种:在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>

实现效果如下
Get几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客
第二种实现的打印效果相对更和谐一点

字体压缩

使用了外部引入的好看的字体文件,然后就有了这样的一个问题,如果将引入了字体文件的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几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客

结果如下
* 这是压缩前的字体文件(大小3M多)
Get几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客
* 压缩后的字体文件(大小30KB)
Get几个小技能——悬浮音乐播放器、字体压缩和打印效果-左眼会陪右眼哭の博客
使用字蛛压缩后,效果非常明显

总结

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

0 条回应
在线人数:1人 来访统计
说谎
林宥嘉
隐藏