提醒:本文最后更新于 74 天前,其中某些信息可能已经过时,请谨慎使用!
你似乎正在查看一篇很久远的文章。
为了你这样的访客,我特地保留了我的历史博文。不要笑话过去的我,用温柔的目光看下去吧。

网页标题及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

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

发表评论

共有 0 条看法