내가

Question

여기 내 코드입니다 마우스 위치에 따라 배경의 색상 변경하려면 다음 MouseMove 이벤트가 이동 될 때마다 새로 고칠 것을 제외하고, 작품의

$(document).mousemove(function(e){ 
    var $width = ($(document).width())/255; 
    var $height = ($(document).height())/255; 
    var $pageX = e.pageX/$width; 
    var $pageY = e.pageY/$height; 
    $("body").css("background-color", "rgb("+$pageX+","+$pageY+","+$pageX+")"); 
}); 

이 종류. 지연되는 것 같아요, 내가 놓친 몇 가지 설정이 있습니까? 페이지 x와 페이지 y에는 문서의 상대 크기가 255로 곱해 지므로 전체 스펙트럼이 사용됩니다. 감사.

Answer 1

아마도 분수가 다시 나오기 때문일 수 있습니다.

시도 :

var $pageX = parseInt(e.pageX/$width,10); 
var $pageY = parseInt(e.pageY/$height,10); 

jsFiddle example

Answer 2

귀하의 코드가로 실행할 수 있도록 최소한으로 해당 이벤트 콜백 코드를 유지하기 위해 최선 그래서 매번 마우스, 조금 양을 이동 실행 지연을 피하기 위해 최대한 빨리 따라서 한 번에 하나씩 만 계산하는 것이 좋습니다. 그래서 이런 일이 조금 더 나은 것 : 당신이 코드가 서로 다른 화면 크기에 대응하려면

var w = Math.round($(document).width()/255); 
var h = Math.round($(document).height()/255); 
var body = $("body"); 

$(document).mousemove(function(e){ 
    var pageX = Math.round(e.pageX/w); 
    var pageY = Math.round(e.pageY/h); 
    body.css("background-color", "rgb("+pageX+","+pageY+","+pageX+")"); 
}); 

당신은 단순히 때 w 및 h 변수를 재설정 할 문서에 '크기 조정'이벤트를 추가 할 수 있습니다 필요한.

측면 지점으로 또한 JQuery와없이 기본적으로 배경 색상을 지정 빠를 수 있습니다

body.style.backgroundColor = "rgb("+pageX+","+pageY+","+pageX+")";