From b39e29c2d54a219b19b1d82eae9d4cc7114689c1 Mon Sep 17 00:00:00 2001
From: tongwenjing <656274287@qq.com>
Date: Wed, 27 Jul 2022 03:39:52 +0100
Subject: [PATCH] Upload From local development env
---
dev/js_mouse_tail/index.html | 24 +++++++++++++++
dev/js_mouse_tail/script.js | 35 +++++++++++++++++++++
dev/js_mouse_tail/style.css | 60 ++++++++++++++++++++++++++++++++++++
wiki/pages/index.html | 2 +-
4 files changed, 120 insertions(+), 1 deletion(-)
create mode 100644 dev/js_mouse_tail/index.html
create mode 100644 dev/js_mouse_tail/script.js
create mode 100644 dev/js_mouse_tail/style.css
diff --git a/dev/js_mouse_tail/index.html b/dev/js_mouse_tail/index.html
new file mode 100644
index 0000000..a1221ab
--- /dev/null
+++ b/dev/js_mouse_tail/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="style.css">
+ <title>Document</title>
+</head>
+<body>
+
+ <div class="main">
+ <ul>
+ <li><input type="text" placeholder="USERNAME"></li>
+ <li><input type="password" placeholder="PASSOWRD"></li>
+ <li><button>LOGIN</button></li>
+ </ul>
+ </div>
+ <div id="back"></div>
+</body>
+</html>
+<script src="script.js">
+
+</script>
\ No newline at end of file
diff --git a/dev/js_mouse_tail/script.js b/dev/js_mouse_tail/script.js
new file mode 100644
index 0000000..aa0354b
--- /dev/null
+++ b/dev/js_mouse_tail/script.js
@@ -0,0 +1,35 @@
+var back = document.getElementById("back")
+var pixaldata = [] //定义数组å˜æ”¾æ¯ä¸ªspançš„ä¿¡æ¯
+var pixallife = 300 //设置æ¯ä¸ªç²’å的生命周期
+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, //åˆå§‹ç”Ÿå‘½å€¼
+ 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, //æ ¹æ®é¼ æ ‡åæ ‡è®¾ç½®ç²’å的起始åæ ‡
+ sy: evt.y
+ })
+
+})
+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.sy += pixal.vy * 2
+ 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]) //åˆ é™¤åå…ƒç´
+ }
+
+ }
+}
+setInterval(draw, 1)
\ No newline at end of file
diff --git a/dev/js_mouse_tail/style.css b/dev/js_mouse_tail/style.css
new file mode 100644
index 0000000..db718f0
--- /dev/null
+++ b/dev/js_mouse_tail/style.css
@@ -0,0 +1,60 @@
+*{
+ margin:0;
+ padding:0;
+}
+body{
+ background:#333;
+ overflow: hidden;
+}
+span.pixal{
+ position:absolute;
+ left:-5px;
+ top:-5px;
+ width:4px;
+ height:4px;
+ background:white;
+ border-radius: 50%;
+}
+.main{
+ position:absolute;
+ width:400px;
+ height:300px;
+ left:50%;
+ top:50%;
+ transform:translate(-50%,-50%);
+ border:1px solid white;
+ border-radius: 15px;
+ display:flex;
+ justify-content: center;
+ align-items: center;
+}
+li{
+ list-style-type: none;
+ text-align:center;
+ padding-top:10px;
+}
+li input{
+ font-size:20px;
+ border:none;
+ box-sizing:border-box;
+ padding:5px;
+ background:transparent;
+ border-bottom: 1px solid white;
+ outline: none;
+ color:white;
+}
+li button{
+ font-size:20px;
+ border:1px solid white;
+ background:transparent;
+ padding:5px;
+ color:white;
+ width:120px;
+ margin-top:10px;
+ border-radius: 5px;
+ transition:0.2s linear;
+}
+li button:hover{
+ background:white;
+ color:black
+}
diff --git a/wiki/pages/index.html b/wiki/pages/index.html
index d4fba25..b4ee6f3 100755
--- a/wiki/pages/index.html
+++ b/wiki/pages/index.html
@@ -5,7 +5,7 @@
{% block page_content %}
-<script type="text/javascript" src="../static/particle.js"></script>
+<script type="text/javascript" src="../dev/js_mouse_tail/script.js"></script>
<div class="row">
<div class="col">
--
GitLab