diff --git a/dev/js_mouse_tail/index.html b/dev/js_mouse_tail/index.html new file mode 100644 index 0000000000000000000000000000000000000000..a1221ab557d0ebc007b6a30b20a81e34a5fd7ef1 --- /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 0000000000000000000000000000000000000000..aa0354bfefc81fa183a60ac2e4aa5bbad19cf7ed --- /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 0000000000000000000000000000000000000000..db718f051d3e2e0683b53bb35d0c1e79e0f71a23 --- /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 d4fba25433d17c12b59754aa83500ae41e39d653..b4ee6f32e085618db5ef766e258344a2631b9c6f 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">