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