类似 Snapchat 的 jquery 颜色选择器

Posted 2023-02-25

【中文标题】类似 Snapchat 的 jquery 颜色选择器

【英文标题】：Snapchat-like jquery color picker

【发布时间】：2013-06-11 19:58:37

【问题描述】：

我有兴趣创建一个类似于 ios Snapchat 中的颜色选择器。这是一个非常漂亮的细长垂直条，我希望它是水平的，seen here。

我一直在使用像这样的单个框，但更愿意使用像 Snapchat 那样的滑块/渐变：

js:

    $(function() 
    $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#000', '#fff'], function() 
        $('#tools').append("<a href='#colored_sketch' data-color='" + this + "' style='border: 1px solid black; width: 30px; height: 30px; background: " + this + "; display: inline-block;'></a> ");
    );

html:

        <div id='tools'></div>

我见过的每个示例颜色选择器都是 Adob​​e 的颜色选择器的再版，它对于我的工作区域来说太大了，而且我还没有找到像 Snapchats 这样的带有滑动渐变的足够小的东西。非常感谢您对重建它的任何帮助，谢谢！

【参考方案1】：

使用一个滑块（例如 jQuery UI），然后颜色就是hsl(slider * 360, 100%, 50%)（假设滑块从 [0,1] 返回值）。

如果需要，您可以将其转换回 rgb。

http://jsbin.com/utumab/1/edit

它是垂直的（没有读到你想要它是水平的）。但改变是微不足道的。

【讨论】：

感谢您的回复，但很抱歉，您能举个例子吗？我去弄乱了 jQuery UI 滑块，但不明白你的评论，谢谢。

谢谢@Prinzhorn，知道了！这是我的版本：jsfiddle.net/t2PDc/1（背景图片由于某种原因没有加载）