https://nova.wodemo.net/ * { height: initial; } td::-webkit-scrollbar{ color:white; } td::-webkit-scrollbar:horizontal { height:2px; } td::-webkit-scrollbar-track-piece:horizontal{ background-color:#424242; } td::-webkit-scrollbar-thumb:horizontal{ background-color:#F48FB1; border:none; } td::-webkit-scrollbar-thumb:horizontal:hover{ background-color:#F06292;; } td::-webkit-scrollbar-thumb:horizontal:active{ background-color:#E91E63; } window.onload = function(e){ window.onscroll = function(e){ var wrap = document.querySelector(".wrap"), top = document.querySelector(".top"), table = document.querySelector("table"), allHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight, scrollHeight = document.body.scrollTop; // console.log((scrollHeight / allHeight).toFixed(3)); top.style.opacity = scrollHeight / allHeight; top.onclick = function(e){ document.body.scrollTop = 0; } } } ]]> Meta]]> Meta]]> Meta]]> Meta]]> Meta]]> figure>img { width: auto; max-width: 100%; height: auto; max-height: 80vh; box-sizing: border-box; display: table; margin: auto; padding: 1vh .5vh 7vh; background: white; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3),2px 4px 0 0 white,2px 3px 3px 0 rgba(0,0,0,0.3),3px 7px 0 0 white; transition: transform 100ms,filter 2s; } img::before { content: "loading..."; display: block; text-align: center; font-size: 3vh; } div.wrap>figure>img:after { content: "\2318"; font-size: 7rem; } div.wrap>figure>figcaption { position: absolute; text-transform: uppercase; font-family: fantasy,"Microsoft Yahei"; font-size: 3vh; display: table; width: 100%; margin: auto; bottom: 0; text-shadow: 1px 1px 2px #4e4e4e; } div.wrap>i { cursor: pointer; position: absolute; top: 50%; width: 40px; height: 40px; font-size: 40px; line-height: 40px; background: white; border-radius: 50%; box-shadow: 0 0 2px 0 #bdbda2; text-align: center; overflow: hidden; transform: translateY(-50%); transition: all 1s; } div.wrap>i::before,div.wrap>i::after { font-family: monospace; font-style: normal; position: relative; left: 2px; top: -1px; transition: all 1s; } div.wrap>i::after { display: none; } #previous { left: 2vh; } #previous::before { content: "\2039"; /*content: "\\2039";*/ } #previous:hover::before { left: 1px; content: "\ab"; /*content: "\\ab"*/ } #next { right: 2vh; } #next::before { content: "\203a"; /*content: "\\203a";*/ } #next:hover::before { left: 3px; content: "\bb"; /*content: "\\bb";*/ } div.wrap>i:hover { border-radius: 3px; background-color: rgba(255,255,255,.7); animation-play-state: paused!important } @keyframes load { 0% { transform: translateY(-50%) rotate(0); } 100% { transform: translateY(-50%) rotate(360deg); } } @media screen and (max-width:800px) { div.wrap>i { display: none!important; } .blur{ height: 100%; } } @media screen and (min-width:800px) { .blur{ width: 100%;; } } ::selection { background: none; } .blur { visibility:visible; position: absolute; left: 0; top: 0; z-index: -1; max-height:none; max-width:none; filter: blur(12px); } var Resource = {}, node = {}, t = new Date; Resource.today = t.getFullYear()+"/"+(t.getMonth()+1)+"/"+t.getDate(); function getHistory(){ var xhr = new XMLHttpRequest(); xhr.open("GET","https://gank.io/api/day/history"); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState==4 && xhr.status==200){ let res = JSON.parse(unescape(xhr.response.replace(/\\u/g,"%u").replace(/-/g,"/"))); if(res.error){ console.error("Get the history ERROR!"); }else{ Resource.availableDate = res.results; Resource.position = 0; func(0,null,null); showPrevious(); showNext(); node.prev.onclick = function(){ node.prev.style.cssText+="animation:load 1s infinite;"; func((Resource.position - 1),this); }; node.next.onclick = function(){ node.next.style.cssText+="animation:load 1s infinite;"; func((Resource.position + 1),this); }; } } } } function func(arg,obj){ if(Resource.requesting){ return false; } Resource.requesting = true; node.oImageNode.style.cssText= "filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1);"; console.log("Param",arg,"\nRequest Start: ",Resource.position); var xhr = new XMLHttpRequest(); xhr.open("GET","https://gank.io/api/day/"+ Resource.availableDate[arg||0]); xhr.send(); node.oTextNode.innerText = "Loding..."; xhr.onreadystatechange = function(){ Resource.requesting = false; if (xhr.readyState==4 && xhr.status==200){ if(arg >= 0){ Resource.position = arg; } showPrevious(); showNext(); Resource.data = JSON.parse(unescape(xhr.response.replace(/\\u/g,"%u"))).results.福利; console.info(Resource.availableDate[arg||0]); //console.log(Resource.availableDate); if(Resource.data.error){ console.error("Get the data ERROR!"); }else{ node.oImageNode.src = Resource.data[0].url; node.blurLayer.src = Resource.data[0].url; //node.oImageNode.alt = Resource.data[0].who; node.oImageNode.style.transform = "translateX(0)"; node.oImageNode.style.transform = "translateY(0)"; node.oImageNode.onload = function(){ node.oTextNode.innerText = Resource.data[0].who; node.oImageNode.style.cssText= "filter:none"; !obj || (obj.style.cssText += "transform:translateY(-50%) rotate(0);animation:null;"); } console.log("Request End: ",Resource.position); } } } } function showPrevious(){ if(Resource.position != 0){ node.prev.style.display = "initial"; }else{ node.prev.style.display = "none"; } } function showNext(){ if(Resource.position < Resource.availableDate.length ){ node.next.style.display = "initial"; }else{ node.next.style.display = "none"; } } window.onload = function(){ //document.body.innerHTML = ''; getHistory(); Resource.requesting = false; node.prev = document.querySelector("#previous"); node.next = document.querySelector("#next"); node.oImageNode = document.createElement("img"); node.oTextNode = document.createElement("figcaption"), node.containor = document.querySelector("figure.containor"); node.blurLayer = node.oImageNode.cloneNode(true); node.oImageNode.src = "noimage.png"; node.oTextNode.innerText = "Loding..."; node.blurLayer.className = "blur"; node.containor.appendChild(node.oImageNode); node.containor.appendChild(node.oTextNode); document.body.append(node.blurLayer); var touchPoint={}; node.oImageNode.addEventListener("touchstart",function(e){ touchPoint.x=e.targetTouches[0].screenX; touchPoint.y=e.targetTouches[0].screenY; //console.log(touchPoint.x,",",touchPoint.y); }); node.oImageNode.addEventListener("touchmove",function(e){ touchPoint.disX = e.targetTouches[0].screenX - touchPoint.x; touchPoint.disY = e.targetTouches[0].screenY - touchPoint.y; console.log( touchPoint.disX > touchPoint.disY); if(Math.abs(touchPoint.disX) > Math.abs(touchPoint.disY)){ e.target.style.transform = "translateX(" + touchPoint.disX + "px)"; }else{ e.target.style.transform = "translateY(" + touchPoint.disY + "px)"; } }); node.oImageNode.addEventListener("touchend",function(e){ //console.log(e); let rateX = e.target.clientWidth * 0.3, rateY = e.target.clientHeight * 0.3; if(touchPoint.disX < -rateX || touchPoint.disY < -rateY){ if(Resource.position < Resource.availableDate.length - 1){ func(Resource.position + 1,null,false); document.querySelector("#previous").style="initial"; } }else{ if(touchPoint.disX > rateX || touchPoint.disY > rateY){ if(Resource.position >= 1){ func(Resource.position - 1,null,true); document.querySelector("#next").style="initial"; } } } touchPoint.disX = null; touchPoint.disY = null; touchPoint.x = null; touchPoint.y = null; e.target.style.transform = "translateX(0)"; e.target.style.transform = "translateY(0)"; }); } ]]> Meta]]> Browse | Meta]]>