唠嗑唠嗑


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

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

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

然后调用typed扩展

<script src="https://cdn.gqink.cn/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="word"><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://api.gqink.cn/api/page/love",  
        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']);
            }
            $("#word").typed({
                strings: list,              
                typeSpeed: 20,
                loop: true,
                backDelay: 3000,
            });
        }
    }); 
}
</script>

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

效果图片

效果

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

最后修改:2020 年 02 月 28 日 03 : 25 PM
本文标题:给博客添加打字一言特效
本文作者:梦城
本文地址:https://www.gqink.cn/archives/534/
版权声明:按照知识共享署名-非商业性使用 4.0 国际协议进行许可,转载引用文章应遵循相同协议
如果觉得我的文章对你有用,请随意赞赏