实现浏览器标签切换改变标签title效果

nimaboke 2016-3-5 3014

我也不知道这是怎么流行起来的,以前我也做过,但渐渐就没使用了,一次在Bigfa博客看到的切换提示很“污”的title特效后,便也看见不少的跟风

搜狗截图20160305150008

其实要实现这种效果很简单,第一种方法:
[code lang="js"]
/*html5-title*/
$(function() {

var RelTitle = document.title;
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") { // Firefox up to v17
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { // Chrome up to v32, Android up to v4.4, Blackberry up to v10
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}

function handleVisibilityChange() {
if (document[hidden]) {
document.title = ' (●––●) Hi, Visitor!';
} else {
document.title = RelTitle;
}
}
if (typeof document.addEventListener !== "undefined" || typeof document[hidden] !== "undefined") {
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
})
[/code]
第二种:
[code lang="js"]
var titleTime, OriginTitile = document.title;
document.addEventListener("visibilitychange", function() {
document.hidden ? ($('[rel="shortcut icon"]').attr("//nimaboke.com/nima.ico"), document.title = "草榴社區主論壇 - t66y.com", clearTimeout(titleTime)) : ($('[rel="shortcut icon"]').attr("href", "//nimaboke.com/nima.ico"), document.title = "(/≧▽≦/)哈哈,上当啦!" + OriginTitile, titleTime = setTimeout(function() {
document.title = OriginTitile
}, 2000))
});
[/code]
第二种方法的页面可见性代码大家可以发挥想象用在其他地方,举个例子,比如们可能都有这样的经历:打开一个浏览器,加载之前打开的所有标签页,听到几个页面发出的混合在一起的声音。虽然浏览器通过标签的声音图标提醒是哪个标签在发出声音,但是如果用这个API就可以实现只有当前标签页才可以发出声音

(注:本文部分参考自aigeek以及jimmycai实现效果)

sunnyhall2016/03/06 11:24:30 评论:
这个注意到过,也蛮好玩的~尤其那个社区,简直绝了
最新回复 (0)