동적으로 마우스 커서 크기를 변경합니다.

웹 응용 프로그램의 마우스 커서가 반경이 인 r 인 프로젝트에서 현재 작업하고 있습니다. 은 사용자가 변경할 수 있습니다. 커서는 페이지의 특정 요소에만 나타나야하지만 해당 요소는 여전히 사용자로부터 클릭을받을 수 있어야합니다.동적으로 마우스 커서 크기를 변경합니다.

내가 상상할 수있는 유일한 방법은 자바 스크립트를 사용하여 커서 이미지를 변경하는 것입니다. 그러나 사용자가 가지고있는 r의 각 가능한 선택에 대한 이미지가 필요합니다.

반경이 r 인 원을 그리는 커서를 따라 캔버스 요소를 배치 할 수 있지만 원본 요소가 여전히 이러한 방식으로 클릭되는지 여부는 확실하지 않습니다.

의견이 있으십니까? 내가 놓친 더 좋은 트릭이 있나?

출처

2011-09-08 Ivan

캔버스를 사용하면 쉽게 처리 할 수 있습니다.

캔버스 위로 클릭을받을 요소 배치.

상단 레이어 (클릭 수를받는 요소)에서 마우스 위치를 추적하고 그 마우스 위치를 사용하여 아래 캔버스에 그립니다.

<!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>

출처

2011-09-22 08:12:20 Carb0n1c

캔버스를 사용하십시오. 이미 언급했듯이, 다른 마우스 커서 그림을 사용하는 것은 번거로운 작업이 될 것입니다.

자바 스크립트 이벤트가 발생할 때마다 모든 요소에서 발생합니다. 즉, div 안에 링크가 있고이 링크를 클릭하면 link와 div가 모두 click 이벤트를받습니다. (하지만 주문이 내 머리 꼭대기에서 어떻게되는지 잘 모르겠다.)

출처

2011-09-08 22:50:42

은 브라우저에 따라 달라집니다 : 여기

내가 당신을 위해 만든 몇 가지 코드 P http://www.quirksmode.org/js/events_order.html –

동적으로 마우스 커서 크기를 변경합니다.

답변

관련 문제