网页标题及icon图标动态效果

大多数的网站显示在标签栏都有一个icon图标和一句标题，默认的标题也都是不会变的，但是如果添加一个小小的脚本，就可以带来可爱的动态效果

下面的这段代码可以让网页标题在离开时显示为 ‘ 草榴社區主論壇 - 1024’，返回页面后变为‘生命-1s ~’，当然啦，文字可以自己改咯 演示地址

    <script>// 浏览器标题切换  
      var OriginTitile = document.title; // 保存之前页面标题  
      var titleTime;
      document.addEventListener('visibilitychange',
      function() {
        if (document.hidden) {
          document.title = '草榴社區主論壇 - 1024';
          clearTimeout(titleTime);
        } else {
          document.title = '生命-1s ~ ';
          titleTime = setTimeout(function() {
            document.title = OriginTitile;
          },
          1000); // 1秒后恢复原标题  
        }
      });</script>

下面这段代码则是修改icon图标的，原理是循环修改图片，达到gif的效果（记得自己改好图片路径啦）演示地址 （没错，代码就是从这里扒的）

<script>
    var favicon_images = [
                    './assets/images/favicon/0.jpg',
                    './assets/images/favicon/1.jpg',
                    './assets/images/favicon/2.jpg',
                    './assets/images/favicon/3.jpg',
                    './assets/images/favicon/4.jpg',
                    './assets/images/favicon/5.jpg'
                ],
    image_counter = 0; // To keep track of the current image

    setInterval(function() {
        $("link[rel='icon']").remove();
        $("link[rel='shortcut icon']").remove();
        $("head").append('<link rel="icon" href="' + favicon_images[image_counter] + '" type="image/jpeg">');
        
      // If last image then goto first image
      // Else go to next image    
      if(image_counter == favicon_images.length -1)
            image_counter = 0;
        else
            image_counter++;
    }, 80);
  </script>

你以为这就结束了？不，还有更骚的

我遇到了一个神奇的项目：https://github.com/shengxinjing/iconjs

没错，这才是摸鱼的最高境界