2016-07-19 2 views
1

사용자가 키를 누르면 커서 이미지를 애니메이션 gif으로 변경하고 싶습니다. 키 누르기/keydown에서 마우스 x/y를 감지하는 방법

그래서 나는 배경 이미지와 DIV을 내 커서 X/Y 위치에 배치 할 ...

은 내가 CSS는 "커서"속성을 변경하려고하지만 이동하지 않습니다.

내가 지금까지하려고 노력하는 것은 : 문제는

var xPlace; 
var yPlace; 

$(document).mousemove(function(eventParent) { 
    xPlace = eventParent.pageX; 
    yPlace = eventParent.pageY; 
}); 

$(document).keydown(function(event) { 
    if (event.keyCode == 109) { 
     $("body").addClass("accessibility_cursordetect"); 
     var cursorDetect = '<div class="accessibility_cursordetect_img"></div>'; 
     $(cursorDetect).appendTo("body"); 
     $(".accessibility_cursordetect_img").css({ 
      "top": yPlace, 
      "right": xPlace 
     }); 
    } 
}); 

- 내를 keyDown 기능 -xPlace & yPlace의 대가로 "정의되지 않은"

어떻게의 x/y 위치를 감지 할 수 있습니다 사용자가 특정 키 (예 : "m"= keyCode = 109)를 누르면 내 커서?

감사합니다.

+0

작품 미세 : 나는'변화를 한 CSS에 대한 left''에 right'과 이동하게하는 코드를 추가하지만 https://jsfiddle.net/zeun4tqu/ 나는 참고를 keyDown에서 정의하지 않습니다 마우스로. 정의되지 않은 작업 예제를 보여줄 수 있습니까? –

+0

나를 위해 일하지 않아! keydown 코드에 "경고"를 추가하면 경고하지 않습니다. : X –

답변

0

body 클래스를 추가 할 jQuery를 이미 가지고 있다고 생각하면 다음과 같은 방식으로 "cursor"속성을 사용하여 커서 이미지 (이 예에서는 프로필 사진 사용)를 변경할 수 있습니다.

.accessibility_cursordetect{ 
    cursor: url(https://www.gravatar.com/avatar/9b2dfec811b4643164cba1fd1f244404?s=32&d=identicon&r=PG), auto; 
} 
나를 위해
+0

처음에 이것을 시도했지만 커서로 애니메이션 GIF 만 사용할 수는 없었습니다 ... 정적 이미지 만 ... –

관련 문제