鼠標移動不在服務器上循環 - 但在jsbin中工作

這可能是一個普通的JavaScript問題，但它使我瘋了。我有一個函數在mousemove事件中檢測pageX和pageY，並將它們分配給css漸變。鼠標移動不在服務器上循環 - 但在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 The Ghostwriter（請參閱https://www.youtube.com/watch?v=cS_lD9_Ur3g）遵循JS Bin示例中的鼠標，但不在其服務器上。 –

在你的css字符串中的值添加'px'在Chrome中修復它。

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%)'

奇怪的是，它可以在JS斌...

來源

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

對不起，我無法在您已鏈接的網頁上找到它。我發現頭部元素中包含內嵌重複的javascript，並且還包含script.js ...？但沒有$（document）.ready（）任何地方。 –

'$（function ...）'與'$（document）.ready（function ...）'相同' – Barmar

鼠標移動不在服務器上循環 - 但在jsbin中工作

回答

相關問題