之前分享过"给网站的标签栏添加一个动态标题"的文章,今天又看到一个简单粗暴,觉得很有意思的动态标题,分享给大家。
网站标签页动态标题,会给访问者一种调皮、生动、形象而又不失大气的感觉。
效果展示
该效果展示图为手机端效果
方法1
<!--网站标题自动判断-->
<script>
var title = document.title;
function istitle() {
var isHidden = document.hidden;
if (isHidden) {
//当窗口不可见
document.title = '(つ ェ ⊂)我藏好了哦~';
} else {
//当窗口可见
document.title = '(*゜ロ゜)ノ被发现了~';
setTimeout("document.title=title", 3000);
}
};
document.addEventListener('visibilitychange', istitle);
</script>
方法2
<script>
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
normal_title = document.title;
document.title = 'w(゚Д゚)w 宝~请不要离开!';
} else document.title = normal_title;
});
</script>
以上两种方法,都可以实现该功能。
将以上其中一种方法复制粘贴到你需要实现这种效果的页面即可。
唔!用上了,你的博客好多干货
哈,欢迎常来哦
咦~是我打开方式不对吗,标题并没有变。
把当前页面挂住(添加了动态标题的页面),访问其他页面才可以看到效果哦