用js写一个能根据鼠标落，鼠标移动，鼠标起实现画箭头功能的函数

要创建一个基于鼠标位置变化动态显示箭头的函数，你可以结合JavaScript和CSS来实现。这里是一个简单的示例，它将在鼠标悬停时改变箭头的图像，并在鼠标离开时恢复原状：

首先，定义HTML结构：

<div id="Layer1" style="position: absolute; width: 50px; height: 50px;">
  <img src="arrow-off.png" id="cursorArrow" alt="Cursor Arrow">
</div>

接着，在JavaScript中编写函数：

// 获取箭头元素
const cursorArrow = document.getElementById('cursorArrow');

// 定义鼠标事件监听器
function updateCursorArrow(event) {
  // 获取鼠标相对于文档的位置
  const mousePos = { x: event.clientX, y: event.clientY };

  // 计算箭头的偏移位置以跟随鼠标
  const arrowOffset = {
    left: mousePos.x - 25, // 假设箭头大小为25x25，调整这里的数值适应实际大小
    top: mousePos.y - 25,
  };

  // 更新箭头的CSS transform属性，模拟箭头跟随鼠标
  cursorArrow.style.transform = `translate(${arrowOffset.left}px, ${arrowOffset.top}px)`;
}

// 添加事件监听
document.addEventListener('mousemove', updateCursorArrow);
document.addEventListener('mouseleave', () => {
  cursorArrow.style.transform = 'translate(0, 0)'; // 当鼠标离开时，恢复默认位置
});

这个示例假设你有两个箭头图片文件：“arrow-off.png”（鼠标未悬停时）和“arrow-on.png”（鼠标悬停时），并且箭头的大小已经调整到了与CSS中设置的宽度和高度相匹配。