jquery - 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();