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