美文网首页Hexo(+NexT)
Hexo NexT主题中添加网页标题崩溃欺骗搞怪特效

Hexo NexT主题中添加网页标题崩溃欺骗搞怪特效

作者: 恬雅过客 | 来源:发表于2018-05-29 14:44 被阅读1次

文章出处: 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 事件的桌面端和移动端兼容性图示,或者你直接点击此处过去查看。

visibilitychange-desktop.png visibilitychange-mobile.png

至少得是ie10,所以你别考虑把 attachEvent 加入进来做 ie6,7,8 的兼容了。Android 不支持的,Safari 浏览器也不支持的。所以在这些设备上没看到效果,不要认为是你的代码问题。
另外,visibilitychange 事件在浏览器tab页面切换时执行,故而不停的切换tab页面也会出现这种假效果。哪怕页面正常加载完成。

相关文章

网友评论

    本文标题:Hexo NexT主题中添加网页标题崩溃欺骗搞怪特效

    本文链接:https://www.haomeiwen.com/subject/vyqajftx.html