是否可以改变光标的形状和大小

is it possible to change cursor shape and size?

本文关键字：改变 光标 是否      更新时间：2023-10-19

是否可以通过两个条来更改光标的形状和大小，如图所示？

http://s28.postimg.org/nxg2x052j/question.png

是的，可以通过javascript和CSS3更改光标形状和大小。看看这些资源，他们有一些很好的信息可以让你开始。

  • http://www.w3schools.com/cssref/pr_class_cursor.asp

  • http://www.javascripter.net/faq/stylesc.htm

以下是另一个SO用户（动态更改光标大小）的片段

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
#hold { margin:0 auto; width:500px; height:500px; border:1px solid #000; }
#canvas { float:left; }
#top-layer { position:absolute; z-index:1; width:500px; height:500px; cursor:crosshair; }
</style>
</head>
<body>
<div id="hold">
  <canvas id="canvas" width="500" height="500"></canvas>
  <div id="top-layer" onmousemove="trackMouse(event);">
    <ul>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
function trackMouse(event) {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, 500, 500);
  this.r = 25; // Radius of circle
  this.x;
  this.y;
  this.x = event.clientX - document.getElementById('canvas').offsetLeft;
  this.y = event.clientY - document.getElementById('canvas').offsetTop;
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
};
</script>
</body>
</html>
相关文章：