マウスは小さな円に従います
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