2

这可能是一个一般的 javascript 问题，但它让我发疯。我有一个函数可以在 mousemove 事件中检测 pageX 和 pageY，并将它们分配给 css 渐变。

$(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/``

4

2 回答 2

3

在 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 Bin 上运行……</p>

于 2013-04-02T20:11:20.297 回答
0

如何在页面中包含脚本？执行 javascript 时，DOM 中可能还不存在“#follower”元素。尝试在定义元素后或加载 DOM 后包含脚本（即使用 jQuery: $(document).ready(HERE_SOMEHOW)）

于 2013-04-02T19:55:12.937 回答