做一个调皮的标签页

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

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

一言不合就上代码!

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/

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