这可能是一般的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
但不在我的服务器上(甚至在桌面上)。任何帮助将不胜感激。
答案 0 :(得分: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 ......
答案 1 :(得分:0)
如何在页面中包含脚本?执行javascript时,“#follower”元素可能尚未出现在DOM中。尝试在定义元素之后或者在加载DOM之后包含脚本(即使用jQuery:$(document).ready(HERE_SOMEHOW)
)