给网站标签栏添加一个动态标题

资源共享 · 04-03 08:48

之前分享过"给网站的标签栏添加一个动态标题"的文章,今天又看到一个简单粗暴,觉得很有意思的动态标题,分享给大家。

网站标签页动态标题,会给访问者一种调皮、生动、形象而又不失大气的感觉。

效果展示

2024-04-03T00:44:50.png

该效果展示图为手机端效果

方法1

<!--网站标题自动判断-->
<script>
    var title = document.title;
        function istitle() {
         var isHidden = document.hidden;    
          if (isHidden) {
        //当窗口不可见
        document.title = '(つ ェ ⊂)我藏好了哦~';
          } else {
        //当窗口可见
        document.title = '(*゜ロ゜)ノ被发现了~';
        setTimeout("document.title=title", 3000);
          }
        };
    document.addEventListener('visibilitychange', istitle);
</script>

方法2

<script>
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
    normal_title = document.title;
    document.title = 'w(゚Д゚)w 宝~请不要离开!';
} else document.title = normal_title;
});
</script>
以上两种方法,都可以实现该功能。

将以上其中一种方法复制粘贴到你需要实现这种效果的页面即可。

Typecho 特效 优化 源码分享

上一篇 : Windows搭建FTP服务器教程

下一篇 : Typecho数据库自动备份


  1. 洗子   访客
    04-07 22:09 第3楼 中国广东省珠海市联通Windows 10 · Google Chrome

    唔!用上了,你的博客好多干货

    1. 刘郎   博主
      04-08 02:47 第4楼 中国移动iPhone · Safari
      @洗子

      哈,欢迎常来哦

  2. 肖寒武   Lv1
    04-03 13:42 第1个脚印 中国浙江省杭州市电信Windows 10 · Google Chrome

    咦~是我打开方式不对吗,标题并没有变。

    1. 刘郎   博主
      04-03 13:46 第2楼 中国移动iPhone · Safari
      @肖寒武

      把当前页面挂住(添加了动态标题的页面),访问其他页面才可以看到效果哦

| 黔ICP备2024020400号-2 | 萌ICP备20246777号 | | 当前有 3 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力