动态标题魔法师：JavaScript特效让你的网站标题活起来

同样是网站标题，为什么别人的让人印象深刻？秘密就在这几行JavaScript代码！让你的标题动起来，瞬间从普通网站变成吸睛利器，访客过目不忘！

2分钟速成：标题特效设置

操作简单到爆，按照步骤来，小白也能轻松搞定：

第一步：进入WordPress后台

登录你的WordPress管理后台，在左侧菜单栏找到Zibll主题设置选项。

第二步：定位自定义代码区域

按照这个路径操作：Zibll主题设置 → 全局&功能 → </> 自定义代码 → 自定义javascript代码

第三步：添加标题特效代码

在”自定义头部HTML代码”代码框中，选择下方任意一种特效代码复制粘贴：

//动态标题 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "发现更多资源，别错过精彩内容！";
        clearTimeout(titleTime)
    } else {
        document.title = "欢迎回到RanShare - 继续你的发现之旅 " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

第四步：保存并查看效果

1. 点击页面底部的保存按钮
2. 打开网站首页，按Ctrl+F5强制刷新
3. 切换到其他标签页再回来，观察标题变化

进阶玩法

基础动态标题

离开页面显示提醒，返回时显示欢迎信息，2秒后恢复原标题

<!--标题动态切换-->
if(!/bot|crawler|spider|googlebot|bingbot|slurp|duckduckbot|baiduspider|yandexbot/i.test(navigator.userAgent)){var o=document.title,t;document.addEventListener("visibilitychange",function(){document.hidden?(document.title="发现更多资源，别错过精彩内容！",clearTimeout(t)):(document.title="欢迎回到RanShare - 继续你的发现之旅！",t=setTimeout(function(){document.title=o},2000))}),window.addEventListener("beforeunload",function(){clearTimeout(t),document.title=o})}

标题闪烁效果

标题文字一闪一闪，强烈吸引用户注意力，适合活动推广

<!--闪烁特效-->
if(!/bot|crawler|spider|googlebot|bingbot|slurp|duckduckbot|baiduspider|yandexbot/i.test(navigator.userAgent)){var o=document.title,t=!0;setInterval(function(){document.title=t?o:"发现·分享·成长",t=!t},800)}

标题心跳效果

标题前显示心跳符号，营造温馨情感氛围，适合生活类网站

<!--心跳特效-->
if(!/bot|crawler|spider|googlebot|bingbot|slurp|duckduckbot|baiduspider|yandexbot/i.test(navigator.userAgent)){var o=document.title,t=['♡','♥'],e=0;setInterval(function(){document.title=t[e%2]+" "+o,e++},600)}

写在最后

本教程由RanShare技术分享平台原创出品，秉承”发现·分享·成长”的核心理念，致力于为技术爱好者提供最实用、最前沿的网站美化技巧。

本文链接：https://www.ranshare.com/358/