JavaScript跟踪鼠标位置并打印运动轨迹

Track mouse position with dots

js, mouse, track

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2971
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
  "use strict";

document.onmousemove = handleMouseMove;
  function handleMouseMove(event) {
    var dot, eventDoc, doc, body, pageX, pageY;

event = event || window.event; // IE-ism

// If pageX/Y aren't available and clientX/Y
    // are, calculate pageX/Y - logic taken from jQuery
          // Calculate pageX/Y if missing and clientX/Y available
    if (event.pageX == null && event.clientX != null) {
      eventDoc = (event.target && event.target.ownerDocument) || document;
      doc = eventDoc.documentElement;
      body = eventDoc.body;

event.pageX = event.clientX +
        (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
        (doc && doc.clientLeft || body && body.clientLeft || 0);
      event.pageY = event.clientY +
        (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
        (doc && doc.clientTop  || body && body.clientTop  || 0 );
    }

// Add a dot to follow the cursor
    dot = document.createElement('div');
    dot.className = "dot";
    dot.style.left = event.pageX + "px";
    dot.style.top = event.pageY + "px";
    document.body.appendChild(dot);
  }
})();

编译

CSS

HTML

Track mouse position with dots

js, mouse, track

编辑器支持Emmet

快捷键

Track mouse position with dots

js, mouse, track

JavaScript 一个在最小值和最大值的范围中取任意3个值的有趣动画

简单Verlet算法JavaScript物理引擎

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：