给博客添加打字一言特效

唠嗑唠嗑

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

先调用一下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打字特效输出即可

效果图片

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