唠嗑唠嗑


之前有好几个博友问我我这博客顶部一言怎么实现的
我上班也比较忙 也没什么时间吧
刚好有空写个文章吧
话不多说直接进入正题

先调用一下FontAwesome图标文件
不调用可能不会显示加载的图标跟爱心图标

<link rel="stylesheet" href="https://cdn.gmit.vip/FontAwesome/css/font-awesome.min.css" type="text/css" media="all" />

然后调用typed扩展

<script src="https://cdn.gmit.vip/blog/js/typed.min.js" type="text/javascript" charset="utf-8"></script>

在要输出处放置以下代码

<p>
    <i style="color:red;" class="fa fa-heart" aria-hidden="true"></i>
    <span id="wordindex"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></span>
    <i style="color:red;" class="fa fa-heart" aria-hidden="true"></i>
    <script>$(function(){typedword();})</script>
</p>

最好加JavaScript代码到网站底部

<script>
function typedword(){
    $.ajax({
        type:"get", 
        url:"https://open.gmit.vip/web/lib/index",  
        data:{page:'index'},
        async:true,   
        success:function(word){
            var list = [];
            for(var i = 0 ;i < word.data.length ; i++){
                list.push(word.data[i]['word']);
            }
            $("#wordindex").typed({
                strings: list,              
                typeSpeed: 20,
                loop: true,
                backDelay: 3000,
            });
        }
    }); 
}
</script>

其实很简单指教调用接口数据利用typed打字特效输出即可

效果图片

效果

话题结束 有问题的文章下留言

Last modification：February 17, 2021
© Allow specification reprint

本文标题：给博客添加打字一言特效

本文链接：https://blog.gumengya.com/69.html

除非另有说明，本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

声明：转载请注明文章来源。

如果觉得我的文章对你有用，请随意赞赏
双击文章内容区域可以给本文点赞哦，快来试试吧
猜你想看 利用JS给博客左上显示FPS帧数简单的给网站加上pjax无刷新加载给博客添加欢迎信息来源
随机文章 主流搜索引擎sitemap入口大全 Debian apt 更换阿里源 给博客添加欢迎信息来源