From 80bfaddb99957285642fb8452325c7a81df34687 Mon Sep 17 00:00:00 2001 From: tongwenjing <656274287@qq.com> Date: Tue, 2 Aug 2022 16:04:23 +0800 Subject: [PATCH] Upload From local development env --- static/particle.js | 44 +++++++++++++++++++++---------------------- wiki/layout.html | 2 +- wiki/pages/index.html | 7 +++++-- 3 files changed, 27 insertions(+), 26 deletions(-) diff --git a/static/particle.js b/static/particle.js index a92e0d6..6ae27a7 100644 --- a/static/particle.js +++ b/static/particle.js @@ -1,35 +1,33 @@ var back = document.getElementById("back") -var pixaldata = [] //å®šä¹‰æ•°ç»„å˜æ”¾æ¯ä¸ªspançš„ä¿¡æ¯ -var pixallife = 150 //设置æ¯ä¸ªç²’å的生命周期 -window.addEventListener("mousemove", function (evt) { //å½“é¼ æ ‡ç§»åŠ¨æ—¶åˆ›å»ºç²’å - var span = document.createElement("span") //新建span作为粒å - span.className = "pixal" //使用pixal作为class设置 - back.appendChild(span) //å°†span作为åå…ƒç´ æ·»åŠ è‡³#back层 - pixaldata.push({ //æ’入对应的spanä¿¡æ¯ - age: 0, //åˆå§‹ç”Ÿå‘½å€¼ +var pixaldata = [] +var pixallife = 300 +window.addEventListener("mousemove", function (evt) { + var span = document.createElement("span") + span.className = "pixal" + back.appendChild(span) + pixaldata.push({ + age: 0, color: "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) +"," + parseInt(Math.random() * 255)+ ")", //ç²’å颜色 - vx: Math.random()*0.5, //xè½´ä½ç§»é€Ÿåº¦ - vy: Math.random()*0.75, //yè½´ä½ç§»é€Ÿåº¦ï¼Œé«˜äºŽx轴以便使粒åç§»åŠ¨æ–¹å‘æ›´åå‘下方 - sx: evt.x, //æ ¹æ®é¼ æ ‡åæ ‡è®¾ç½®ç²’åçš„èµ·å§‹åæ ‡ + vx: Math.random()*0.5, + vy: Math.random()*0.75, + sx: evt.x, sy: evt.y }) - }) -function draw() { //绘制粒å +function draw() { for (var i = 0; i < pixaldata.length; i++) { - pixal = pixaldata[i] //指定当å‰ç²’å属性 - children = back.children[i] //指定当å‰åå…ƒç´ - pixal.age++ //å¢žåŠ ç”Ÿå‘½å€¼ - pixal.sx += pixal.vx * 2 //设置ä½ç§»è·ç¦» + pixal = pixaldata[i] + children = back.children[i] + pixal.age++ + pixal.sx += pixal.vx * 2 pixal.sy += pixal.vy * 2 - children.style.background = pixal.color //设置背景颜色 - children.style.left = pixal.sx + "px" //æ ¹æ®ä½ç§»å€¼è®¾ç½®åæ ‡ + children.style.background = pixal.color + children.style.left = pixal.sx + "px" children.style.top = pixal.sy + "px" - if (pixal.age >= pixallife) { //判æ–生命值是å¦è¶…过生命周期 - pixaldata.splice(i, 1) //åˆ é™¤æ•°ç»„å…ƒç´ - back.removeChild(back.childNodes[i]) //åˆ é™¤åå…ƒç´ + if (pixal.age >= pixallife) { + pixaldata.splice(i, 1) + back.removeChild(back.childNodes[i]) } - } } setInterval(draw, 1) \ No newline at end of file diff --git a/wiki/layout.html b/wiki/layout.html index 55653c5..e07ed1a 100755 --- a/wiki/layout.html +++ b/wiki/layout.html @@ -7,7 +7,7 @@ <link rel="shortcut icon" href="https://static.igem.wiki/common/icons/favicons/igem-2022.svg"/> <link rel="license" href="https://creativecommons.org/licenses/by/4.0/"/> - <script type="text/javascript" src="{{ url_for('static', filename = 'particle.js') }}"></script> + <script src="{{ url_for('static', filename = 'particle.js') }}"></script> <!-- Bootstrap CSS --> <link href="{{ url_for('static', filename = 'bootstrap.min.css') }}" rel="stylesheet"> diff --git a/wiki/pages/index.html b/wiki/pages/index.html index e486b10..04174ef 100755 --- a/wiki/pages/index.html +++ b/wiki/pages/index.html @@ -6,9 +6,12 @@ {% block page_content %} <style type="text/css"> + main{ + align-self: center; + } .firstPage{ - height: 100vh; - width: 100vw; + height: 100%; + width: 100%; position: sticky; scroll-snap-align: start; scroll-snap-type: y mandatory; -- GitLab