当你观看屏幕录制时，你会发现一些软件会在演示者点击的地方添加逐渐扩大的点，以使其更加明显。使用 CSS 过渡效果，这可以通过 JavaScript 很简单地实现。

查看以下 JSFiddle 演示，你就会明白我们的意思。当你点击文档时，点击处会显示一个逐渐扩大的圆点，然后又会消失。如果持续按下鼠标，圆点会保持显示，并且你可以将其移动到任何位置。

JSFiddle 演示.

移动圆点

代码非常简单。我们生成一个 DIV 元素并使用鼠标移动它。为此，我们需要 JavaScript。查看注释以了解代码的工作原理。

(function(){

  // create a DIV element, give it an ID and add it
  // to the body
  var plot = document.createElement('div'),
      pressed = false;
  plot.id = 'clickhighlightplot';
  document.body.appendChild(plot);

  // define offset as half the width of the DIV
  // (this is needed to put the mouse cursor in
  // its centre)
  var offset = plot.offsetWidth / 2;

  // when the mouse is moved and the mouse button is pressed,
  // move the DIV to the current position of the mouse cursor
  document.addEventListener('mousemove', function(ev) {
    if (pressed) { moveplot(ev.pageX, ev.pageY); }
  }, false);

  // when the mouse button is pressed, add a class called
  // 'down' to the body of the element and define pressed
  // as true. Then move the DIV to the current mouse
  // position.
  document.addEventListener('mousedown', function(ev) {
    document.body.classList.add('down');
    pressed = true;
    moveplot(ev.pageX, ev.pageY);
  }, false);

  // when the mouse is released, remove the 'down' class
  // from the body and set pressed to false
  document.addEventListener('mouseup', function(ev) {
    document.body.classList.remove('down');
    pressed = false;
  },  false);

  // move the DIV to x and y with the correct offset
  function moveplot(x, y) {
    plot.style.left = x - offset + 'px';
    plot.style.top = y - offset + 'px';
  }
})();

这负责创建和移动 DIV，并向 body 元素添加了一些类以供操作。

圆点放大

圆点的放大使用了 CSS 过渡效果。我们将圆点的缩放比例从 0,0 更改为 1,1，并在一段时间内完成。请注意，我们需要缩小而不是放大，因为 Webkit 会缩放元素而不是像 Firefox 那样留下清晰的轮廓（此脚本的第一个版本向上缩放了一个 10×10 像素的圆点，看起来很糟糕）。

#clickhighlightplot {
  cursor: pointer;
  pointer-events: none;
  background: rgba(255, 255, 10, 0.7);
  width:100px;
  height: 100px;
  position: absolute;
  border-radius: 100px;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
      -ms-transition: -ms-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
   -webkit-transform: scale(0, 0);
      -moz-transform: scale(0, 0);
       -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
           transform: scale(0, 0);
}
.down #clickhighlightplot {
  -webkit-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
       -o-transform: scale(1, 1);
          transform: scale(1, 1);
}

修复“覆盖可点击元素”问题

目前脚本工作方式的主要问题是，你用放大的圆点覆盖了其他元素，使其无法点击。这可能不是你想要的结果，因此我们需要确保圆点覆盖了它们，但仍然允许点击穿过。好消息是，为此可以使用称为 指针事件 的功能。Firefox 和 Webkit 支持此功能，但遗憾的是 IE 和 Opera 不支持。

从 JS 和 CSS 转到纯 JS（但使用 CSS）

现在，虽然能够在 CSS 中维护所有外观和感觉很酷，但问题是我们需要重复所有供应商前缀，并且会遇到浏览器可能不支持我们想要执行的操作的问题。因此，有时将整个功能迁移到 JavaScript 中更有意义，因为我们有机会在那里测试支持并编写更少的代码。

Clickhighlight.js 实现了所有这些。无需在 CSS 中维护（并要求你添加所有供应商前缀），你现在只需添加脚本并调用其 init() 方法即可获得效果。

具有“nohighlight”类的元素不会获得此效果。你可以通过传递初始化对象来更改外观。

clickhighlight.init({
  size:        '300px', // the maximum size of the dot
  duration:    '2s',    // duration of the effect (seconds)
  colour:      'green', // the dot colour - RGBA = transparency
  nohighlight: 'notme'  // class of elements not highlighted
});

你可以在 YouTube 上的这段视频 中看到它的实际效果。

接下来的步骤可能是添加触摸支持，并将其转换为书签，以便你可以在任何页面上使用它。还有其他想法吗？