做一个调皮的标签页

最近在午休的时候,觉得写项目太严肃了,就给自己的博客折腾出来一个调皮的功能:监听页面是否正在被浏览,灵活切换页面的标题。

这是个在许多博客上都很常见的小功能,仅供娱乐,哈哈!

一言不合就上代码!

function toggleTitle() {
var title = document.title;
/* 切换浏览状态 */
var hide = ['hidden', 'webkitHidden', 'mozHidden'],
hideProp = null;
for (var i = 0; i < hide.length; i++) {
if (hide[i] in document) {
hideProp = hide[i];
}
}
hide = hideProp;
var showEven = hideProp.replace(/hidden/i, 'visibilitychange');
function onVis() {
setTimeout(function() {
if (document[hideProp]) {
count.stop();
document.title = 'ε٩(๑> 灬 <)۶з藏好啦(つд⊂)'
} else {
document.title = title;
count.start();
}
}, 300)
}
document.addEventListener(showEven, onVis);
};

其实切换原理很简单,主要是怎么去监听到当前页面被激活————也就是正处在被浏览的标签。

不同的浏览器,文档对象document的显隐时间触发的具体事件名不一致,这是个比较不好办的事,于是通过万能的StackOverflow问答社区总算是挖出来比较精简的方法,便有了如上的js原生写法。

个人觉得,用js写出来的动画,还是用JQuery来写比较流畅,自己写的还是略显生涩,动画看起来不够流畅。

于是,我把这个功能又移除了。

NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/html/toggle-title/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!