跟著滑鼠走的加載動畫 | 程式專案

{"id":28336,"student_id":1440,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n    \u003cmeta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"ie=edge\\\"\u003e\\n    \u003ctitle\u003e跟着鼠标走的加载小动画\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"container\\\"\u003e\u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body, #container {\\n    padding: 0;\\n    margin: 0;\\n}\\n#container {\\n    width: 100%;\\n    height: 100%;\\n    background-color: white;\\n    position: absolute;\\n}\\n#ball_1, #ball_2, #ball_3 {\\n    border-radius: 100%;\\n    position: absolute;\\n}\\n#ball_1 {\\n    width: 8px;\\n    height: 8px;\\n    background-color: #999;\\n}\\n#ball_2 {\\n    width: 12px;\\n    height: 12px;\\n    background-color: #666;\\n}\\n#ball_3 {\\n    width: 16px;\\n    height: 16px;\\n    background-color: #333;\\n}\",\"js\":\"var container = document.getElementById(\\\"container\\\");\\nvar ball_arr = [];\\n\\nfor (var i = 1; i \u003c= 3; i++) {\\n    var ball = document.createElement('div');\\n    ball.id = \\\"ball_\\\" + i;\\n    ball.style.display = \\\"none\\\";\\n    ball_arr.push(ball);\\n    container.appendChild(ball);\\n}\\n\\nvar path_length = 50;\\nvar path_width = 30;\\nvar path_angel = 0;\\nvar angel_increase = 1.3;\\nvar ball_gap = 0.8;\\n\\nvar webUI = container;\\nif (document.addEventListener) {\\n    //FireFox,Chrome,Opera…\\n    // webUI.addEventListener('click', onMouseClick, false);\\n    // webUI.addEventListener('mousedown', OnMouseDown, false);\\n    // webUI.addEventListener('mouseup', OnMouseUp, false);\\n    webUI.addEventListener('mousemove', onMouseMove, false);\\n    // webUI.addEventListener('mouseover', onMouseOver, false);\\n    // webUI.addEventListener('mouseout', onMouseOut, false);\\n    //c.addEventListener('touch',onMouseClick,false);\\n} else if (document.attachEvent) {\\n    //IE\\n    // webUI.attachEvent('onclick', onMouseClick, false);\\n    // webUI.attachEvent('onmousedown', OnMouseDown, false);\\n    // webUI.attachEvent('onmouseup', OnMouseUp, false);\\n    webUI.attachEvent('onmousemove', onMouseMove, false);\\n    // webUI.attachEvent('onmouseover', onMouseOver, false);\\n    // webUI.attachEvent('onmouseout', onMouseOut, false);\\n} else {\\n    //Other（IE，FireFox，Chrome，Opera等，绝大部分浏览器支持方法 onclick 监听）\\n    alert(\\\"您的当前的浏览器可能是：……\\\");\\n    // webUI.onclick=onMouseClick;\\n    // webUI.onmousedown=OnMouseDown;\\n    // webUI.onmouseup=OnMouseUp;\\n    webUI.onmousemove = onMouseMove;\\n    // webUI.onmouseover=onMouseOver;\\n    // webUI.onmouseout=onMouseOut;\\n}\\n\\nvar mouseX = 0;\\nvar mouseY = 0;\\n\\nfunction onMouseMove(event) {\\n    if (timer != null) {\\n        cancelAnimationFrame(timer);\\n    }\\n    mouseX = event.clientX + document.body.scrollLeft - document.body.clientLeft;\\n    mouseY = event.clientY + document.body.scrollTop - document.body.clientTop;\\n    timer = requestAnimationFrame(drawFrame);\\n}\\n\\nwindow.requestAnimFrame = (function() {\\n    return  window.requestAnimationFrame ||\\n    window.webkitRequestAnimationFrame ||\\n    window.mozRequestAnimationFrame ||\\n    window.oRequestAnimationFrame ||\\n    window.msRequestAnimationFrame ||\\n    function(callback) {\\n        window.setTimeout(callback, 1000 / 60);\\n    };\\n})();\\n\\nwindow.cancelAnimationFrame = (function () {\\n    return window.cancelAnimationFrame ||\\n    window.webkitCancelAnimationFrame ||\\n    window.mozCancelAnimationFrame ||\\n    window.oCancelAnimationFrame ||\\n    function (timer) {\\n        window.clearTimeout(timer);\\n    };\\n})();\\n\\nvar timer = null;\\nfunction drawFrame() {\\n    for (var i = 0; i \u003c ball_arr.length; i++) {\\n        var ball = ball_arr[i];\\n        ball.style.display = \\\"block\\\";\\n        var angel = ((path_angel * Math.PI / 180) + (i * ball_gap)) % 360;\\n        ball.style.left = path_length * Math.cos(angel) + mouseX - ball.style.width/2 - document.body.clientLeft + \\\"px\\\";\\n        ball.style.top = path_width * Math.sin(angel) + mouseY - ball.style.height/2 - document.body.clientTop + \\\"px\\\";\\n        path_angel = (path_angel + angel_increase) % 360;\\n    }\\n    timer = requestAnimationFrame(drawFrame);\\n}\"}","created_at":"2018-05-11T15:00:38.499+08:00","updated_at":"2019-10-26T06:27:46.098+08:00","name":"跟著滑鼠走的加載動畫","language":"web","screenshot":{"url":"https://cdn2.koding.school/uploads/project/screenshot/28336/fba631a21ad22e4cb070ddb95d26208c.jpg"},"parent_id":null,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":146,"hashid":"5j3sj9v5","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}