Upload From local development env

b39e29c2 · tongwenjing · a5d5b7f1 · b39e29c2 · b39e29c2 · b39e29c2
Commit b39e29c2 authored 2 years ago by tongwenjing
--- a/dev/js_mouse_tail/index.html
+++ b/dev/js_mouse_tail/index.html
+<!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
--- a/dev/js_mouse_tail/script.js
+++ b/dev/js_mouse_tail/script.js
+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
--- a/dev/js_mouse_tail/style.css
+++ b/dev/js_mouse_tail/style.css
+*{
+    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
+}
--- 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">