Hexo瞎折腾系列(9) - 网页标题崩溃特效

概述前言 本系列的所有修改均基于本系列第一篇中的新增文件(譬如custom.js)，请先自行阅读Hexo瞎折腾系列(1) - 准备工作与简单美化；并按照文章所说自行修改代码或文件。 为网页添加标题崩溃特效 该特效为：当用户离开站点相关的页面时，网页的标题会变成“已崩溃”，网站图标也会改变；当用户重新回到站点页面时才会恢复正常。 实现方式如下： 请在themes/next/source/js/src/c 前言

本系列的所有修改均基于本系列第一篇中的新增文件(譬如custom.Js)，请先自行阅读Hexo瞎折腾系列(1) - 准备工作与简单美化；并按照文章所说自行修改代码或文件。

为网页添加标题崩溃特效

该特效为：当用户离开站点相关的页面时，网页的标题会变成“已崩溃”，网站图标也会改变；当用户重新回到站点页面时才会恢复正常。

实现方式如下：

请在themes/next/source/Js/src/custom.Js里加入如下代码：

/* 离开当前页面时修改网页标题，回到当前页面时恢复原来标题 */window.onload = function() {  var OriginTitile = document.Title;  var TitleTime;  document.addEventListener('visibilitychange',function() {    if(document.hIDden) {      $('[rel="icon"]').attr('href',"/failure.ico");      $('[rel="shortcut icon"]').attr('href',"/failure.ico");      document.Title = '喔唷，崩溃啦！';      clearTimeout(TitleTime);    } else {      $('[rel="icon"]').attr('href',"/favicon-32x32.ico");      $('[rel="shortcut icon"]').attr('href',"/favicon-32x32.ico");      document.Title = '咦，页面又好了！';      TitleTime = setTimeout(function() {        document.Title = OriginTitile;      },2000);    }  });}

然后在站点根目录的/source目录下添加failure.ico，作为网站崩溃时显示的图标；如下：

这里的favicon-32x32.ico是你个人站点的图标，改成你自己的图标就好。

总结

以上是内存溢出为你收集整理的Hexo瞎折腾系列(9) - 网页标题崩溃特效全部内容，希望文章能够帮你解决Hexo瞎折腾系列(9) - 网页标题崩溃特效所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。