[英]Change gradient background colors on mouse move
我正在尝试创建一个渐变,其顶部和底部的颜色会根据光标位置而改变。 当使用$(document.body).css('background','rgb('+rgb.join(',')+')');
时,以下函数有效 更改背景,但我似乎无法使其与渐变一起使用。 以下代码是我为在Firefox中测试而设置的代码。 我将在当前尝试为每个浏览器设置选项的同时更新代码。
http://coreytegeler.com/justin/
$(window).load(function(){
var $win = $(window),
w = 0,h = 0,
top = [],
bottom = [],
getWidth = function() {
w = $win.width();
h = $win.height();
};
$win.resize(getWidth).mousemove(function(e) {
top = [
Math.round(e.pageX/w * 255),
Math.round(e.pageY/h * 255),
150
];
bottom = [
Math.round(e.pageX/h * 255),
Math.round(e.pageY/w * 255),
150
];
$(document.body).css('background: -moz-linear-gradient(top, ('+top.join(',')+'), ('+bottom.join(',')+'))');
}).resize();
});
一个问题是您使用的javascript .css
方法错误。 它带有两个参数或一个对象。 因此应该是:
$(document.body).css('background', '-moz-linear-gradient(top, rgb('+top.join(',')+'), rgb('+bottom.join(',')+'))');
要么
$(document.body).css({background : '-moz-linear-gradient(top, rgb('+top.join(',')+'), rgb('+bottom.join(',')+'))'});
除此之外,您的代码看起来基本上是正确的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.