文章出处: https://asdfv1929.github.io/2018/01/25/crash-cheat/
给网页title添加一些搞怪特效 ,提高页面体验。
创建js文件crash_cheat.js
在next\source\js\src
文件夹下创建crash_cheat.js
,添加代码:
<!--崩溃欺骗-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/TEP.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
引用
在next\layout\_layout.swig
文件中,添加引用(注:在 swig 末尾添加):
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>
补充
懂代码的会考虑横向和纵向的兼容性问题。
我先贴个 visibilitychange 事件的桌面端和移动端兼容性图示,或者你直接点击此处过去查看。
至少得是ie10,所以你别考虑把 attachEvent 加入进来做 ie6,7,8 的兼容了。Android 不支持的,Safari 浏览器也不支持的。所以在这些设备上没看到效果,不要认为是你的代码问题。
另外,visibilitychange 事件在浏览器tab页面切换时执行,故而不停的切换tab页面也会出现这种假效果。哪怕页面正常加载完成。
网友评论