Mousemove가 서버에서 루핑되지 않지만 jsbin에서 작동합니다.

이것은 일반적인 자바 스크립트 질문 일 수 있습니다. mousemove 이벤트에서 pageX 및 pageY를 감지하고 CSS 그라디언트에 할당하는 함수가 있습니다. 정말 날 미치게 무슨Mousemove가 서버에서 루핑되지 않지만 jsbin에서 작동합니다.

$(function(){ 
    var mouseX = 0, mouseY = 0; 
    $(document).mousemove(function(e){ 
     mouseX = e.pageX; 
     mouseY = e.pageY; 
    }); 

    // cache the selector 
    var follower = $("#follower"); 
    var xp = 0, yp = 0; 
    var loop = setInterval(function(){ 
     // change 12 to alter damping higher is slower 
     xp += (mouseX - xp)/12; 
     yp += (mouseY - yp)/12; 
     follower.css({ 
      background : '-webkit-radial-gradient('+xp+' '+yp+', ellipse cover, rgba(12,47,63,0) 0%,rgba(10,37,49,1) 27%,rgba(5,10,10,1) 100%)' 
     }); 

    }, 30); 
});

는 jsbin에서 작동한다는 것입니다 : 내 서버 (또는 바탕 화면)에

http://jsbin.com/owuxep/3/edit

하지만. 어떤 도움이라도 대단히 감사하겠습니다.

http://paulclarkphoto.com/mouseFollow/``

출처

2013-04-02 Jacksnap13

구체적으로 무엇 "작동하지 않는다"? –

@ChrisFarmer 유령 (http://www.youtube.com/watch?v=cS_lD9_Ur3g 참조)은 JS Bin 예제에서는 마우스를 따라 움직이지만 서버에서는 그렇지 않습니다. –

CSS 문자열의 값 다음에 'px'를 추가하면 Chrome에서 자동 수정됩니다. 이 JS 빈에서 작동하는 이상한

background: '-webkit-radial-gradient('+xp+'px '+yp+'px, ellipse cover, rgba(12,47,63,0) 0%,rgba(10,37,49,1) 27%,rgba(5,10,10,1) 100%)'

...

출처

2013-04-02 20:11:20

오 마이 맙소사. 너무 단순한 Trevor. 너는 생명의 은인이야. 정말 고마워! – Jacksnap13

어떻게 당신은 당신의 페이지에있는 스크립트가 포함되어 있습니까? javascript가 실행될 때 '#follower'요소가 DOM에 아직없는 것 같습니다. 요소가 정의되거나 DOM이로드 된 후 스크립트를 포함 시키십시오. (예 : jQuery : $(document).ready(HERE_SOMEHOW))

출처

2013-04-02 19:55:12

문제의 코드는'document.ready()'함수에 있습니다. – Barmar

죄송합니다. 연결된 페이지에서 찾을 수 없습니다. 나는 head-element와 script.js에 인라인을 포함하는 중복 된 자바 스크립트가 있다는 것을 발견했다 ...? 그러나 아무 $ (문서) .ready() 어디서나. –

'$ (function ...)'은'$ (document) .ready (function ...) '와 동일합니다. – Barmar

Mousemove가 서버에서 루핑되지 않지만 jsbin에서 작동합니다.

답변

관련 문제