鼠标跟踪特效与页面放大

在录视频教程时，经常会需要在不同网页之间切换，网页上面移动鼠标、键盘输入等操作。最终的效果是看不到鼠标，导致整个画面像是静止的，并且画面比较小，看不清。Houzikeji给出一个javascript的方案。

鼠标特效

既然我们的目标是浏览器，我们是否能做点鼠标特效，这样就会比较显眼。我们经常会在一些网站上看到鼠标追踪的效果。
话不多说，直接看代码。代码由GPT生成，我们做了适当修改。
这段代码会生成一些小蓝点，追踪鼠标的特效。

var css = '.trajectory-point { \
  position: fixed; \
  width: 10px; \
  height: 10px; \
  border-radius: 50%;\
  background-color: rgba(0, 0, 255, 0.5);\
  z-index:100;\
  pointer-events: none;  /* 让鼠标事件可以穿过这个元素 */ \
  transition: opacity 1s; \
}',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));


document.body.addEventListener('mousemove', function(e) {
  //var x = e.clientX;
  //var y = e.clientY;
  var zoom = parseFloat(getComputedStyle(document.body).zoom);
  var x = (e.pageX - window.pageXOffset) / zoom;
  var y = (e.pageY - window.pageYOffset) / zoom;

  var point = document.createElement('div');
  point.className = 'trajectory-point';
  point.style.left = (x - 5) + 'px';  /* 减去5是为了让轨迹点的中心和鼠标的位置对齐 */
  point.style.top = (y - 5) + 'px';

  document.body.appendChild(point);

  setTimeout(function() {
    point.style.opacity = 0;  /* 1秒后，轨迹点的透明度变为0，即轨迹点开始消失 */
  }, 0);

  setTimeout(function() {
    document.body.removeChild(point);  /* 1秒后，从文档中移除轨迹点 */
  }, 1000);
});

鼠标显示

鼠标特效显示完了之后，会消失。这段代码加了一个圆圈追踪鼠标，本来想做一个放大镜的效果。代码同样由GPT生成。

var css2 = '.magnifier { \
  position: fixed;\
  width: 200px;\
  height: 200px;\
  border-radius: 50%;\
  border: 1px solid black;\
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);\
  background-repeat: no-repeat;\
  z-index:100;\
  pointer-events: none;  /* 让鼠标事件可以穿过这个元素 */\
}',
    head = document.head || document.getElementsByTagName('head')[0],
    style2 = document.createElement('style');

head.appendChild(style2);
style2.type = 'text/css';
style2.appendChild(document.createTextNode(css2));

var magnifier = document.createElement('div');
magnifier.className = 'magnifier';
document.body.appendChild(magnifier);

document.body.addEventListener('mousemove', function(e) {
  //var x = e.pageX;
  //var y = e.pageY;
  var zoom = parseFloat(getComputedStyle(document.body).zoom);
  var x = (e.pageX - window.pageXOffset) / zoom;
  var y = (e.pageY - window.pageYOffset) / zoom;

  magnifier.style.left = (x - 100) + 'px';  /* 减去100是为了让放大镜的中心和鼠标的位置对齐 */
  magnifier.style.top = (y - 100) + 'px';

  magnifier.style.backgroundImage = 'url(' + document.documentElement.innerHTML + ')';
  magnifier.style.backgroundPosition = (-x * 2 + 100) + 'px ' + (-y * 2 + 100) + 'px';
  magnifier.style.backgroundSize = (document.documentElement.offsetWidth * 2) + 'px ' + (document.documentElement.offsetHeight * 2) + 'px';
});

页面放大

同时增加了一个右键菜单，可以对页面进行放大的操作，这样就可以看清楚页面内容了。

var contextMenu = document.createElement('div');
contextMenu.style.display = 'none';
contextMenu.style.background = '#fff';
contextMenu.style.border = '1px solid #ccc';
document.body.appendChild(contextMenu);

// 创建放大菜单项
var zoomInItem = document.createElement('div');
zoomInItem.textContent = '放大到150%';
zoomInItem.onclick = function() {
  document.body.style.zoom = '150%';
  contextMenu.style.display = 'none';
};
contextMenu.appendChild(zoomInItem);

// 创建还原菜单项
var resetZoomItem = document.createElement('div');
resetZoomItem.textContent = '还原缩放';
resetZoomItem.onclick = function() {
  document.body.style.zoom = '100%';
  contextMenu.style.display = 'none';
};
contextMenu.appendChild(resetZoomItem);

// 监听右键点击事件
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  contextMenu.style.position = 'fixed';
  var zoom = parseFloat(getComputedStyle(document.body).zoom);
  var x = (e.pageX - window.pageXOffset) / zoom;
  var y = (e.pageY - window.pageYOffset) / zoom;

  contextMenu.style.left = x + 'px';
  contextMenu.style.top = y + 'px';
  contextMenu.style.display = 'block';
});

// 点击其他地方时隐藏右键菜单
document.addEventListener('click', function() {
  contextMenu.style.display = 'none';
});

最终效果

最终效果如页面所示。