Dynamically change mouse cursor size
I'm currently working on a project where the mouse cursor for a web application is a circle with radius r where r can be changed by the user. The cursor need only appear within a specific element on the page, but that element should still be able to receive clicks from the user.
From what I can imagine, my only options are to use javas开发者_如何转开发cript to change the cursor image; however, that would require an image for each possible choice of r the user has.
Or I can have a canvas element follow the cursor which would draw a circle with radius r in it, however, I am not sure whether the original element would still receive clicks this way.
Any thoughts? Is there a better trick that I'm missing?
You can do that fairly easily with canvas.
Placing the element that is going to receive clicks over the canvas.
Tracking the mouse position on the top layer (the element to receive clicks) and using those mouse positions to draw on the canvas below.
Here is some code I made for you:
<!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>
Go ahead and use a canvas. As you stated already, it's going to be a hassle to do it with different mouse cursor pictures.
Whenever a javascript event occurs, it happens in all of elements. That is, if you have a link inside of a div and it is clicked, both the link and div receive the click event. (But I'm not sure how the ordering goes off the top of my head)
加载中,请稍侯......
精彩评论