基于鼠标坐标的渐变

时间:2013-06-25 00:06:08

标签: javascript colors mouse-coordinates

下面的代码创建了一个随光标位置而变化的渐变,这正是我想要的,但颜色看起来非常有限,并不总是我正在寻找的。有没有办法设置它以确保颜色保持更轻和更饱和的色调?另外,我想在双方之间有更多的对比,正如你所看到的,它们有时会变成相同的颜色。

我知道我的数学显然没有为此设置,但我对十六进制颜色的结构知之甚少,不知道从这里去哪里。

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, rgb('+top.join(',')+'), rgb('+bottom.join(',')+'))'});
    $(document.body).css({background : '-webkit-linear-gradient(top, rgb('+top.join(',')+'), rgb('+bottom.join(',')+'))'});
}).resize();
});

非常感谢任何帮助!

0 个答案:

没有答案