https://neucrack.com/static/js/wallpaper.js

1window.onload = function(){
2}
3
4$(document).ready(function(){
5    onLoadAnime();
6    onLoadTime();
7    udpateImg();
8    addClickFireworks();
9    menuRegister();
10});
11
12
13function onLoadAnime(){
14    $("#menu").animate({
15        'position': 'absolute',
16        'right': '35px',
17        'bottom':'20px',
18        'font-size': '1em',
19      }, 500);
20}
21
22function setWallpaperOffset(x, y){
23    $("#background").css("background-position-x", x);
24    $("#background").css("background-position-y", y);
25}
26function setTimeDisplayRotate(rotateX, rotateY){
27    var time_value = document.getElementById('time_value');
28    time_value.style.webkitTransform = "rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";
29    time_value.style.MozTransform = "rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";
30    time_value.style.msTransform = "rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";
31    time_value.style.OTransform = "rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";
32    time_value.style.transform = "rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";
33}
34function getWallpaperOffset(img){
35    var screenW = $(window).width();
36    var screenH = $(window).height();
37    var imgW = img.width;
38    var imgH = img.height;
39    // background-size: cover
40    var offsetW = screenW - imgW;
41    var offsetH = screenH - imgH;
42    if(offsetW<0 && (imgW/imgH < screenW/screenH) ){
43        imgH *= screenW/imgW;
44        imgW = screenW;
45    }else{
46        if(offsetW > offsetH){
47            imgH *= screenW/imgW;
48            imgW = screenW;
49        }else{
50            imgW *= screenH/imgH;
51            imgH = screenH;
52        }
53        
54    }
55    offsetW = screenW - imgW;
56    offsetH = screenH - imgH;
57    return [offsetW, offsetH, screenW, screenH]
58}
59function udpateImg(){
60    var r_data = {
61    }
62    $.ajax({
63        type: "POST",
64        url:"/wallpaper",
65        data:JSON.stringify(r_data),
66        contentType: "application/json",
67        dataType: "json",
68        success: function(data){
69            if(data.status=="ok"){
70                var img = new Image;
71                img.src = data.data.url;
72                var imgLoaded = false;
73                img.onload = function(){
74                    $("#loading_hint").hide();
75                    $("#background").css("background-image", "url("+img.src+")");
76                    imgLoaded = true;
77                }
78                img.onerror  = function(){
79                    $("#loading_hint .text").text("电波无法传达 加载失败了o(╥﹏╥)o 需要刷新重来哦~");
80                }
81                $(window).mousemove(function(e){
82                    var offset = getWallpaperOffset(img);
83                    var offsetW = offset[0];
84                    var offsetH = offset[1];
85                    var screenW = offset[2];
86                    var screenH = offset[3];
87                    var cursorX = e.pageX;
88                    var cursorY = e.pageY;
89                    if(imgLoaded){
90                        var offsetX = offsetW*(cursorX/screenW);
91                        var offsetY = offsetH*(cursorY/screenH);
92                        setWallpaperOffset(offsetX, offsetY);
93                    }
94                    var rotateX = -(cursorY/screenH-0.5)*90; 
95                    var rotateY = (cursorX/screenW-0.5)*90;
96                    setTimeDisplayRotate(rotateX, rotateY);                      
97                });
98                function orientationHandler(event) {
99                    var offset = getWallpaperOffset(img);
100                    var offsetW = offset[0];
101                    var offsetH = offset[1];
102                    var gamma = 0;
103                    var beta = 0;
104                    var orientation = window.orientation;
105                    if(!orientation || orientation == 0){
106                        gamma = event.gamma;
107                        beta = event.beta;
108                    }else if(orientation == 90){
109                        gamma = event.beta;
110                        beta = -event.gamma;
111                    }else if(orientation == 180){
112                        gamma = -event.gamma;
113                        beta = -event.beta;
114                    }else if(orientation == -90){
115                        gamma = -event.beta;
116                        beta = event.gamma;
117                    }
118                    var orientation = window.orientation;
119                    if(gamma<-45){
120                        gamma = -45;
121                    }
122                    if(gamma>45){
123                        gamma = 45;
124                    }
125                    if(beta<-45){
126                        beta = -45;
127                    }
128                    if(beta>45){
129                        beta = 45;
130                    }

131                    if(imgLoaded){
132                        var offsetX = offsetW - offsetW*(gamma+45)/90;
133                        var offsetY = offsetH - offsetH*(beta+45)/90;
134                        setWallpaperOffset(offsetX, offsetY);
135                    }
136                    if(orientation%180 == 0){
137                        beta = event.beta;
138                    }else{
139                        beta = event.gamma;
140                    }
141                    if(orientation == 0){
142                        beta = event.beta;
143                    }else if(orientation == 90){
144                        beta = -event.gamma;
145                    }else if(orientation == 180){
146                        beta = -event.beta;
147                    }else if(orientation == -90){
148                        beta = event.gamma;
149                    }
150                    if(beta<0){
151                        beta = 0;
152                    }
153                    if(beta>90){
154                        beta = 90;
155                    }
156                    var rotateX = -(beta-45);
157                    var rotateY = gamma;
158                    setTimeDisplayRotate(rotateX, rotateY); 
159                }
160                if (window.DeviceOrientationEvent) {
161                    window.addEventListener("deviceorientation", orientationHandler, false);
162                }
163            }else{
164                console.log("获取背景图片失败！");
165            }
166        },
167        error: function(){
168            console.log("请求背景图片失败！");
169        }
170    });
171}
172
173function PrefixInteger(num, length) {
174    return (Array(length).join('0') + num).slice(-length);
175}
176function setTime(){
177    var now = new Date();
178    var hour = now.getHours();
179    var minute = now.getMinutes();
180    var timeStr = PrefixInteger(hour,2)+":"+PrefixInteger(minute,2);
181    $("#time_display .time").text(timeStr);
182}
183function onLoadTime(){
184    var mouseUpCount = 0;
185    setInterval(setTime, 1000);
186    $(window).mouseup(function(e){
187        if(++mouseUpCount == 2){
188            if($("#time_display").is(":hidden")){
189                $("#time_display").fadeIn();
190                $("#menu").fadeIn();
191            }else{
192                $("#time_display").fadeOut();
193                $("#menu").fadeOut();
194            }
195        }
196        setTimeout(() => {
197            mouseUpCount = 0;
198        }, 300);
199    });
200}
201
202function menuRegister(){
203    $("#menu").on("click", function(){
204        $("#settings_wrapper").slideDown();
205    });
206    $("#settings_mask, #close_menu").on("click", function(){
207        $("#settings_wrapper").slideUp();
208    });
209    // fullscreen wallpaper show
210    $(".show_big").on("click", function(e){
211        var bg = $(e.target.parentNode.parentNode).css("background-image");
212        bg = bg.split("?")[0]
213        bg = bg.split('"')[1]
214        $("#fullscreen_img").attr("src", bg);
215        $("#fullscreen_mask").fadeIn();
216    });
217    $(".close_fullscreen").on("click", function(e){
218        $("#fullscreen_mask").fadeOut();
219    });
220}