2BLOG/404.php at main · 2Broear/2BLOG · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title> 404 NOT FOUND <?php $nick = get_option('site_nick');echo $nick ? " | " . $nick . ' - ' . get_bloginfo('name') : $nick; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="msapplication-TileColor" content="<?php echo $theme_color; ?>" />
<meta name="msapplication-TileImage" content="<?php custom_cdn_src('img'); ?>/favicon/favicon.ico" />
<link rel="shortcut icon" href="<?php custom_cdn_src('img'); ?>/images/favicon/favicon.ico"/>
<meta name="description" content="404错误页面，丢失目标文件！ | <?php echo $nick; ?>">
<meta name="theme-color" content="#eb6844">
<style type="text/css" rel="stylesheet">
  body{
    background: #000;
    background-size: cover;
    margin: 0;;padding: 0;
    overflow: hidden;
    cursor: url(<?php custom_cdn_src('img'); ?>/images/404/flashlight.cur),default;
  }
  .items{
    width: 100%;height: auto;
    position: absolute;
  }
  .items .itemsInside span{
      transition: transform .05s ease;
      will-change: transform;
  }
  .items .itemsInside{
    width: 1920px;height: 1024px;
    background: url('<?php custom_cdn_src('img'); ?>/images/404/1920-dark-wall.jpg') no-repeat;
  }
  .items .itemsInside #fof{
    display: block;
    width: 266px;height: 291px;
    margin: 0 auto;
    position: absolute;
    top: 191px;left: 366px;
    background: url('<?php custom_cdn_src('img'); ?>/images/404/960-glitch-ez.gif') no-repeat;
  }
  .items .itemsInside #dusts{
    display: block;
    position: absolute;
    top: 330px;left: 340px;
    width: 200px;height: 200px;
    z-index: 1;
    animation: dustsLoop 1.8s linear infinite alternate;
    background: url('<?php custom_cdn_src('img'); ?>/images/404/light-dusts.gif') no-repeat;
  }
  @keyframes dustsLoop {
    0%{opacity: 0;}
    100%{opacity: 0.66;}
  }
  .items .itemsInside #break{
    display: block;
    position: absolute;
    top: 160px;left: 160px;
    z-index: 3;
    width: 512px;height: 512px;
    background: url('<?php custom_cdn_src('img'); ?>/images/404/light-break.gif') no-repeat;
  }
  .items .itemsInside #mask{
    display: block;
    position: absolute;
    top: -350px;left: -680px;
    z-index: 2;
    width: 2515px;height: 2009px;
    background: url('<?php custom_cdn_src('img'); ?>/images/404/mask-dark-wall.png') no-repeat;
  }
  .positions{ opacity: 0;visibility: hidden;display: none;}
  .positions span{
    z-index: 999999;
  }
  .positions #central{
    display: block;
    position: absolute;
    width: 25px;height: 25px;
    border: 2px solid red;
    border-radius: 50%;
  }
  .positions #centralX{
    display: block;
    position: absolute;
    width: 100%;height: 1px;
    background: white;
  }
  .positions #centralY{
    display: block;
    position: absolute;
    width: 1px;height: 100%;
    background: white;
  }
</style>
</head>
<!--<div class="positions" style="opacity: 0;visibility: hidden;display: none;">
  <span id="central"></span>
  <span id="centralX"></span>
  <span id="centralY"></span>
</div>-->
<div class="items">
  <div class="itemsInside">
    <span id="mask"></span>
    <span id="dusts"></span>
    <span id="fof"></span>
    <span id="break"></span>
  </div>
</div>
<!-- siteJs -->
<script type="text/javascript" src="<?php custom_cdn_src(); ?>/js/jquery-1.9.1.min.js"></script>
<!-- pluginJs-->
<!-- inHtmlJs -->
<script type="text/javascript">
  $(function(){
      var WinHeight = $(window).height(),WinWidth = $(window).width(),
      DocHeight = $(document).height(),DocWidth = $(document).width(),
      cpl = WinWidth/2,cpt = WinHeight/2,
      halfCentralH = $('#central').outerHeight(true)/2,halfCentralW = $('#central').outerWidth(true)/2;
      console.log(WinHeight/2 + ' winW ' + WinWidth/2);
      $('.positions #central').offset({left:(WinWidth/2)-halfCentralW,top:(WinHeight/2)-halfCentralH});
      $('.positions #centralX').offset({left:'',top:WinHeight/2});
      $('.positions #centralY').offset({left:WinWidth/2,top:''});
      $(window).bind({
        mousemove:function(e){
          var thisx = e.pageX,thisy = e.pageY,
          lmX = -(cpl - thisx),lmY = -(cpt - thisy),
          lmXb = (cpl - thisx),lmYb = (cpt - thisy);
          //相对中心点，x左小右大，y上小下大。左上角既满足x左小也满足y上小，右下角相反。左下角满足x左小 y下大，右上角相反。
          //第一象限 (thisx > cpl && thisy < cpt)，第二象限 (thisx < cpl && thisy < cpt)
          //第三象限 (this < cpl && thisy > cpt)，第四象限 (thisx > cpl && thisy > cpt)
          //全局 thisx > cpl || thisx < cpl && thisy > cpt || thisy < cpt
          if(thisx > cpl || thisx < cpl && thisy > cpt || thisy < cpt){
            //排除二三四象限(||而不用&&)
            $('.items .itemsInside #mask').css({'transform':'translateX('+lmX/4+'px) translateY('+lmY/4+'px)'})
            $('.items .itemsInside #fof').css({'transform':'translateX('+lmXb/10+'px) translateY('+lmYb/10+'px)'})
            $('.items .itemsInside #dusts').css({'transform':'translateX('+lmX/8+'px) translateY('+lmY/8+'px)'})
            $('.items .itemsInside #break').css({'transform':'translateX('+lmX/6+'px) translateY('+lmY/6+'px)'})
          }else if(thisx > cpl || thisy < cpt){
            //针对第一象限(右上角) 大范围移动
          }
          //象限检测
          if(thisx > cpl && thisy < cpt){
            console.log('一');
          }else if (thisx < cpl && thisy < cpt) {
            console.log('二');
          }else if (thisx < cpl && thisy > cpt) {
            console.log('三');
          }else if (thisx > cpl && thisy > cpt) {
            console.log('四');
          }
        }
      })
  })
</script>
</body></html>