マウスは小さな円に従います

2953 ワード



    var mouseCircle = <span class="hljs-function"><span class="hljs-title">function</span></span> () {
        document.documentElement.addEventListener(<span class="hljs-string">'mousemove'</span>, <span class="hljs-keyword">function</span> (event) {
            var x = event.pageX, y = event.pageY;
            var mouseCircle = document.createElement(<span class="hljs-string">'div'</span>);
            mouseCircle.className = <span class="hljs-string">'mouseCircle'</span>;
            this.appendChild(mouseCircle);
            //  
            mouseCircle.addEventListener(<span class="hljs-string">'animationend'</span>, <span class="hljs-function"><span class="hljs-title">function</span></span> () {
                mouseCircle.parentNode.removeChild(mouseCircle);
            });
            //  
            mouseCircle.style.left = (x - mouseCircle.clientWidth / 2) + <span class="hljs-string">'px'</span>;
            mouseCircle.style.top = (y - mouseCircle.clientHeight-10) + <span class="hljs-string">'px'</span>;
        });  

        document.documentElement.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span> (event) {
            var x = event.pageX, y = event.pageY;
            var mouseCircle = document.createElement(<span class="hljs-string">'div'</span>);
            mouseCircle.className = <span class="hljs-string">'mouseCircle'</span>;
            this.appendChild(mouseCircle);
            //  
            mouseCircle.addEventListener(<span class="hljs-string">'animationend'</span>, <span class="hljs-function"><span class="hljs-title">function</span></span> () {
                mouseCircle.parentNode.removeChild(mouseCircle);
            });
            //  
            mouseCircle.style.left = (x - mouseCircle.clientWidth / 2) + <span class="hljs-string">'px'</span>;
            mouseCircle.style.top = (y - mouseCircle.clientHeight-10) + <span class="hljs-string">'px'</span>;
        });    
    };

    mouseCircle();


codepen.io/loejin/pen/…
転載先:https://juejin.im/post/5c92119f6fb9a0710b726460