在HSL模式下鼠标悬停颜色更改

Question

我在另一个线程上发现了这个代码，用鼠标悬停改变了背景颜色：

var $win = $(window),
w = 0,h = 0,
rgb = [],
getWidth = function() {
    w = $win.width();
    h = $win.height();
};

$win.resize(getWidth).mousemove(function(e) {

rgb = [
    Math.round(e.pageX/w * 255),
    Math.round(e.pageY/h * 255),
    150
];

$(document.body).css('background','rgb('+rgb.join(',')+')');

}).resize();

是否可以以非常简单的方式将其转换为HSL模式？

Answer 1

不确定。您只需手动定义亮度（HSL中的L），这与示例中的蓝色处理方式相当。

var $win = $(window),
    w = 0,h = 0,
    hsl = [],
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };

$win.resize(getWidth).mousemove(function(e) {

    hsl = [
        Math.round(e.pageX/w * 360),
        Math.round(e.pageY/h * 100) + "%",
        50 + "%"
    ];

    $(document.body).css('background','hsl('+hsl.join(',')+')');

}).resize();