diff --git a/一考/answer/main.js b/一考/answer/main.js new file mode 100644 index 0000000..db89204 --- /dev/null +++ b/一考/answer/main.js @@ -0,0 +1,129 @@ +vh = window.innerHeight / 100; +vw = window.innerWidth / 100;; +function search() { + value = document.getElementsByClassName("sin")[0].value; + if (value == "") return; + window.location.href = "https://cn.bing.com/search?q=" + value; +} +function changeBack() { + simg = document.getElementsByClassName("simg")[0]; + simg.style.filter = "blur(2px)"; + sin = document.getElementsByClassName("sin")[0]; + sin.value = ""; +} +function backBack() { + simg = document.getElementsByClassName("simg")[0]; + simg.style.filter = "none"; + sin = document.getElementsByClassName("sin")[0]; + sin.value = "Search what I want"; +} +function drawCanvas(img) { + c = document.getElementsByClassName("ret")[0]; + ctx = c.getContext("2d"); + ctx.drawImage(img, 35 * vw, 30 * vh, 30 * vw, 36 * vh, 0, 0, 25 * vw, 30 * vh); + // ctx.drawImage(img, 25 * vw, 12 * vh, 30 * vw, 36 * vh, 1*vw, 1*vh, 16 * vw, 16 * vh); + ctx.clearRect(1 * vw, 1 * vw, 15.4 * vw, 14 * vh); +} +tick = 0; cs = -1; +pid = -1; p = [], d = []; +function runHorse() { + if (tick == 99999) tick = 0; + p[0] = document.getElementsByClassName("p1")[0]; + p[1] = document.getElementsByClassName("p2")[0]; + p[2] = document.getElementsByClassName("p3")[0]; + d[0] = document.getElementsByClassName("d1")[0]; + d[1] = document.getElementsByClassName("d2")[0]; + d[2] = document.getElementsByClassName("d3")[0]; + tb = document.getElementsByClassName("timebar")[0]; + cb = document.getElementsByClassName("cbar")[0]; + ret = document.getElementsByClassName("ret")[0]; + tick += 1; + if (tick == 1) drawCanvas(p[0]); + if (cs != -1) { + tick += 9; + if (tick % 10 < 10 && tick / 10 > 1) tick -= tick % 10; + } + m = tick / 100; + pid = parseInt((m / 5) % 3); + pid = (pid + 2) % 3; + cb.style.width = m % 5 / 5 * 6 * vw + "px"; + if (m % 5 > 0 && m % 5 <= 1 && m / 5 >= 1) { + p[pid].style.width = (1 - m % 5) * 70 + "vw"; + ret.style.opacity = 1 - m % 5; + ret.style.transform = "rotate(" + 20 * (m % 5) + "deg)"; + } + if (m % 5 == 1 && m > 5) { + drawCanvas(p[parseInt(m / 5) % 3]); + p[0].style["z-index"] = (getComputedStyle(p[0])["z-index"] + 1) % 3; + p[1].style["z-index"] = (getComputedStyle(p[1])["z-index"] + 1) % 3; + p[2].style["z-index"] = (getComputedStyle(p[2])["z-index"] + 1) % 3; + } + if (m % 5 > 1 && m % 5 <= 2 && m / 5 >= 1) { + ret.style.opacity = m % 5 - 1; + ret.style.transform = "rotate(-" + 20 * (2 - m % 5) + "deg)"; + } + if (m % 5 == 0) { + if (pid != -1) p[(pid + 1) % 3].style.width = "70vw"; + if (pid == cs) cs = -1; + tb.style.left = (m / 5) % 3 * 6 + "vw"; + // d[pid].style["background-color"] = "#dbdac9"; + // d[(m / 5) % 3].style["background-color"] = "#fce26b"; + } +} +setInterval(runHorse, 10); +function chorse(id) { + if (pid == id) return; + cs = id; +} +window.onload = function () { + sin = document.getElementsByClassName("sin")[0]; + sin.onkeydown = function (event) { + if (event.keyCode == 13) { + search(); + } + }; +}; +window.onscroll = function () { + sbar = document.getElementsByClassName("sbar")[0]; + simg = document.getElementsByClassName("simg")[0]; + horse = document.getElementsByClassName("horse")[0]; + sbarTop = sbar.getBoundingClientRect().top; + simgTop = simg.getBoundingClientRect().top; + horseTop = horse.getBoundingClientRect().top; + if (simgTop > - 30 * vh) { + sbar.style.top = "unset"; + sbar.style.position = "absolute"; + sbar.style["z-index"] = "unset"; + } + else if (sbarTop < 10 * vh) { + sbar.style.top = "10vh"; + sbar.style.position = "fixed"; + sbar.style["z-index"] = 99; + } + if (horseTop > 23 * vh) { + simg.style.top = "unset"; + simg.style.position = "relative"; + simg.style["z-index"] = "unset"; + horse.style["margin-top"] = "unset"; + } + else if (simgTop < -70 * vh) { + simg.style.top = "-70vh"; + simg.style.position = "fixed"; + simg.style["z-index"] = 99; + horse.style["margin-top"] = "93vh"; + } + test = document.getElementsByClassName("test")[0]; + cart = 20; + //console.log(parseInt(test.getBoundingClientRect().top)/vh); + if (test.getBoundingClientRect().top < cart * vh) { + delta_top = 1 - (cart - parseInt(test.getBoundingClientRect().top) / vh) / (cart + 20); + console.log(delta_top); + if (delta_top < 0) delta_top = 0; + s1 = document.getElementsByClassName("s1")[0]; + s2 = document.getElementsByClassName("s2")[0]; + s3 = document.getElementsByClassName("s3")[0]; + s3.style.transform = "translate(" + (25 - 39 * delta_top) + "vw," + 16 * delta_top + "vh) rotateY(" + 50 * delta_top + "deg)"; + s2.style.transform = "translate(" + 3 * delta_top + "vw," + -14 * delta_top + "vh) rotateY(" + -5 * delta_top + "deg)"; + s1.style.transform = "translate(" + (-25 + 46 * delta_top) + "vw," + 1 * delta_top + "vh) rotateY(" + -45 * delta_top + "deg)"; + } +} \ No newline at end of file